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%的人还看了以下文章

  • 带左右箭头控制的网站幻灯片轮播切换效果

    一款比较实用的带左右箭头按钮控制的jquery slider图片插件,网站幻灯片焦点图片轮播切换代码下载。 页面代码非常简洁,适合调用更改。 <div class=”slider”> <div class=”slider-img”> <ul class=”slider-img-ul”> <li><img …

    2019年4月10日
    8.9K0
  • 鼠标放上去,图片上方动态显示半透明说明文字(源码)

    <style> .itemInWorks{ width: 240px; height: 150px; border-radius:5px; font-size: 20px; font-weight: 600; color: #FFFFFF; text-align: center; line-height: 40px; background: ur…

    2020年2月20日
    2.4K0
  • 立体动画按钮、切换开关

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

    2019年10月17日
    1.6K0
  • 如何去除导航栏最后一个不需要的分隔线

    网页导航栏制作时,菜单项之间常用1像素细线做分隔,如上图。 给菜单栏菜单项添加分隔线代码如下: /* 给菜单栏菜单项添加分隔线 */ .nav li { border-right: 1px solid #666; } 最后一个菜单项右边就不需要这个边框线了,如何处理呢? 去除最后一个菜单项右边的分隔线,代码 /* 移除分隔线 */ .nav li:last-…

    2018年7月26日
    3.3K0
  • 中国省、市区二级联动下拉选择框-JS源码

    中国省、市区二级联动下拉选择框,包含所有省份及市县信息。 当选择省份下拉选择框时,市区的下拉框会根据选择的省市加载出来。如上图所示选择“山东省”,市的下拉选择框只会出现山东省的市县。 1.把中国省份和市区的信息放到JavaScript文件里(js/common.js),中国网页设计在js文件里定义了两个数组,分别存放省份和对应的市区。 //省份 var pr…

    2019年6月5日
    3.8K0
  • 纯CSS制作三级导航菜单

    本文分享如何使用纯CSS制作三级导航菜单,优点:代码简洁,速度快。 HTML代码: <!–代码部分begin www.125jz.com–> <div class=”menu”> <ul class=”nav1″> <li class=”li1″><a href=”http://www.125jz.c…

    2018年8月2日
    2.4K0

发表回复

登录后才能评论