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

  • 精美的滑出式水平导航特效

    一个精美的滑出式水平导航特效,打开页面只能看到文本链接,用户将鼠标悬停于标签上时,该导航菜单项目会滑出。 预览     下载源码 1、HTML结构 导航实现仅用一个简单的无序列表 <ul id=”navigation”> <li class=”home”><a href=””><span>Home</sp…

    2018年2月6日
    2.9K0
  • 鼠标指向图片实现放大效果-CSS3特效

    鼠标指向图片实现放大效果,多用于产品展示,可以通过Js,jquery来实现。为更好的优化网站,最好的方法还是纯css来实现。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>纯css实现鼠标指向图片放大效果|…

    2018年7月14日
    4.9K0
  • 纯css制作简洁的绿色导航菜单

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

    2018年2月26日
    3.1K0
  • CSS实现的左侧垂直导航(简洁)

    CSS实现的左侧垂直导航(简洁),站长们可以方便的更改样式。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <t…

    2018年9月22日
    4.8K0
  • jQuery插件实现省、市、区县三级联动代码,调用非常简单

    在《中国省、市区二级联动下拉选择框-JS源码》文章中我们分享了省、市区二级联动的JS实现代码,今天125建站网给大家分享一款中国省、市、区县三级联动的代码,通过jQuery插件实现,调用非常简洁。 HTML结构 基本的HTML结构是使用一个<div>容器来包裹一组<select>元素。 <div><!– conta…

    2019年6月5日
    4.5K0
  • 中国省、市区二级联动下拉选择框-JS源码

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

    2019年6月5日
    5.5K0

发表回复

登录后才能评论