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

  • JS+CSS实现点击弹出窗口,带关闭按钮(非常简单)

    最近做网页设计项目,要求点击图片后弹出窗口,在新弹出窗口中播放视频。从网上找了很多代码,要么非常复杂,要么兼容性有问题,反复对比多种实现方法,最后确定代码如下: <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″/> <title>JS+CSS实现…

    2018年5月9日
    9.0K0
  • 垂直(纵向)二级导航菜单

    CSS+JS制作的垂直(纵向)二级导航菜单,可灵活修改。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS+JS制作的垂直(纵向)二级导航菜单|www.125jz.com</title> &…

    2018年9月19日
    18.1K0
  • 精美的滑出式水平导航特效

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

    2018年2月6日
    4.8K0
  • 立体动画按钮、切换开关

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

    2019年10月17日
    12.2K0
  • 网页右侧可隐藏的浮动QQ在线客服源码下载

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

    2018年8月2日
    2.4K0
  • JS+CSS制作的动态二级下拉导航菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>动态二级下拉导航菜单</title> <style type="text/css"> *{margin:0;padd…

    2018年12月31日
    3.4K0

发表回复

登录后才能评论