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
这14张图会让你感受到春秋天惊人的对比
下一篇 2018年9月13日 上午8:41

99%的人还看了以下文章

  • 在网页中间弹窗代码-网页遮罩效果

    在网页中间弹出窗口,使整个网页变半透明。 <style> .bg{position:absolute;z-index:999;filter:alpha(opacity=50);background:#666;opacity: 0.5;-moz-opacity: 0.5;left:0;top:0;height:99%;width:100%;} .b…

    2019年1月5日
    5.2K0
  • 精美的滑出式水平导航特效

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

    2018年2月6日
    5.3K0
  • 网页右侧可隐藏的浮动QQ在线客服源码下载

    在线客服是企业网站必不可少的在线交流渠道,本站分享的在网页右侧可隐藏的浮动QQ在线客服使用jquery编写,固定在网站右侧不随滚动条滚动,点击展开,再次点击收缩,蓝色风格,调用方便。 网页右侧可隐藏的浮动QQ在线客服效果 HTML代码: <div id=floatTools class=jz125> <div class=floatL&gt…

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

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

    2018年9月19日
    7.6K0
  • 点击弹出带关闭按钮的窗口特效(兼容所有浏览器)

    弹出页面被大多浏览器拦截,现在多数改为弹出窗口,即通过弹出层来实现,今天中国网页设计给大家分享两个点击弹出带关闭按钮的窗口代码。 jquery实现可拖动弹出窗口特效 <html > <head> <title>jquery实现可拖动弹出窗口特效-带关闭按钮</title> <script type=&qu…

    2018年5月9日
    11.9K0
  • ScrollPicLeft.js实现的图片前后切换效果-源码下载

    ScrollPicLeft.js实现的图片的前后切换效果,适用于网页中的证书展示、推荐商品之类的栏目。 功能:可以手动点击前后切换箭头按钮,进行图片的翻页,浏览上一张,下一张的效果。 特点:代码精简,不需要使用JQuery,功能强大,使用非常的简单,便利。! 在网页引入ScrollPicLeft.js <script type=”text/javasc…

    2019年11月1日
    9.3K0

发表回复

登录后才能评论