jQuery带标题的图标图片轮播特效(免费)

jQuery带标题的图标图片轮播特效(免费)

源码下载

在<head></head>之间引入

<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<link rel="stylesheet" href="css/style.css">

在<body></body>之间添加如下代码:

<div id="wrapper">
  <h1>Title</h1>
  <div id="slider-wrap">
    <ul id="slider">
     <li data-color="#1abc9c">
      <div>
        <h3>Slide #1</h3>
        <span>Sub-title #1</span>
      </div>                
      <i class="fa fa-image"></i>
     </li>
     
     <li data-color="#3498db">
      <div>
        <h3>Slide #2</h3>
        <span>Sub-title #2</span>
      </div>
      <i class="fa fa-gears"></i>
     </li>
     
     <li data-color="#9b59b6">
      <div>
        <h3>Slide #3</h3>
        <span>Sub-title #3</span>
      </div>
      <i class="fa fa-sliders"></i>
     </li>     
     <li data-color="#34495e">
      <div>
        <h3>Slide #4</h3>
        <span>Sub-title #4</span>
      </div>
      <i class="fa fa-code"></i>
     </li>     
     <li data-color="#e74c3c">
      <div>
        <h3>Slide #5</h3>
        <span>Sub-title #5</span>
      </div>
      <i class="fa fa-microphone-slash"></i>
     </li>
    </ul>
     <!--controls-->
    <div class="btns" id="next"><i class="fa fa-arrow-right"></i></div>
    <div class="btns" id="previous"><i class="fa fa-arrow-left"></i></div>
    <div id="counter"></div>
    <div id="pagination-wrap">
    <ul>
    </ul>
    </div>
    <!--controls-->  
  </div>
</div>

在</body>之前添加

<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/slide.js"></script>

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/2539.html

(0)
江山如画的头像江山如画管理团队
上一篇 2018年9月12日 上午8:06
下一篇 2018年9月13日 上午8:41

99%的人还看了以下文章

  • 纯css实现的三级下拉导航菜单

    非常简洁的一个三级导航菜单,纯css实现,适用于企业产品分类导航等,代码精简,兼容所有浏览器。 See the Pen 纯css实现的三级下拉导航菜单 by 江山如画 (@jgyzhr)on CodePen.

    2019年11月1日
    3.9K0
  • 纯css制作简洁的绿色导航菜单

    css制作简洁的绿色导航菜单,代码非常简单,背景颜色和背景图片换下,即可满足大多数导航菜单需要。 导航菜单所需图片素材: 导航菜单HTML代码: <div id=”nav”> <ul> <li><a href=”http://www.125jz.com/”>首页</a></li> &lt…

    2018年2月26日
    2.6K0
  • 纯CSS制作红色网站二级下拉导航菜单

    纯CSS制作红色网站二级下拉导航菜单,代码非常简洁,适合修改后使用,入门就能掌握。 二级下拉导航菜单HTML代码: <nav> <ul> <li><a href=”#”>首页</a></li> <li><a href=”#”>电影</a> <ul…

    2019年4月17日
    4.5K0
  • 立体动画按钮、切换开关

    实例名称:立体动画按钮、切换开关在线预览:https://codepen.io/chrisgannon/pen/ZaPmKp HTML代码: <div id=”app”></div> CSS代码: body { background-color:#FFFCF9; overflow: hidden; text-align:center;…

    2019年10月17日
    2.5K0
  • 超酷的HTML5 3D图片旋转动画特效

    中国网页设计分享的一款HTML5 3D图片动画特效,使用js动画框架TweenMax 技术实现。 这款HTML5 3D动画非常酷,当在图片上面拖动鼠标时,图片会在垂直方向分裂出数块小长方体,然后每一个小长方体沿着鼠标拖动的方向旋转。 效果演示      源码下载

    2018年9月28日
    4.1K0
  • CSS+JS制作纵向点击展开的二级导航菜单

    网页制作时,如产品分类目录、导航等,需要制作纵向二级导航菜单,点击展开分类显示子目录,再点击收缩起目录。 中国网页设计分享的二级导航菜单使用CSS+JS制作,调用简单方便,可移植、可修改。 网页HTML代码(放在body区域): <div id=”my_menu” class=”sdmenu”> <div> <span>教…

    2018年9月19日
    3.7K0

发表回复

登录后才能评论