大家肯定见过某些网站一个炫酷的页面，就是图片轮播，也就是我们常说的幻灯片播放。对于初学者来说，可能会有点头疼，没关系，小李在这给大家献上自己刚刚写好的关于图片轮播的代码。

以下功能的实现用了jQuery，大家可以去网上找一下关于jQuery的资源下载使用。

  • index.html
  1.  <!doctype html>
  2.  <html>
  3.  <head>
  4.      <meta charset="utf-8">
  5.      <title>幻灯片文档</title>
  6.      <link href="_css/slide.css" type="text/css" rel="stylesheet" />
  7.      <script src="_js/jquery.min.js" type="text/javascript"></script>
  8.      <script src="_js/slide.js" type="text/javascript"></script>
  9.  </head>
  10.  
  11.  <body>
  12.      <h1>幻灯片设计</h1>
  13.      <!-- html页面通过li标签添加播放图片 -->
  14.      <div class="slider-container">
  15.          <ul id="slider" class="slider-wrapper">
  16.              <li class="slide-first" >
  17.                  <img src="_images/p1.jpg" alt="雪山天池" />
  18.                  <div class="caption">
  19.                      <h3 class="caption-title"><a href="#">雪山天池</a></h3>
  20.                  </div>
  21.              </li>
  22.              <li>
  23.                  <img src="_images/p2.jpg" alt="未来之路" />
  24.                  <div class="caption">
  25.                      <h3 class="caption-title"><a href="#">未来之路</a></h3>
  26.                  </div>
  27.              </li>
  28.              <li>
  29.                  <img src="_images/p3.jpg" alt="独立寒秋" />
  30.                  <div class="caption">
  31.                      <h3 class="caption-title"><a href="#">独立寒秋</a></h3>
  32.                  </div>
  33.              </li>
  34.              <li>
  35.                  <img src="_images/p4.jpg" alt="高山流水" />
  36.                  <div class="caption">
  37.                      <h3 class="caption-title"><a href="#">高山流水</a></h3>
  38.                  </div>
  39.              </li>
  40.              <li>
  41.                  <img src="_images/p5.jpg" alt="天堑变通途" />
  42.                  <div class="caption">
  43.                      <h3 class="caption-title"><a href="#">天堑变通途</a></h3>
  44.                  </div>
  45.              </li>
  46.               <li>
  47.                  <img src="_images/p6.jpg" alt="远古的呼唤" />
  48.                  <div class="caption">
  49.                      <h3 class="caption-title"><a href="#">远古的呼唤</a></h3>
  50.                  </div>
  51.              </li>
  52.               <li>
  53.                  <img src="_images/p7.jpg" alt="欲与天公试比高" />
  54.                  <div class="caption">
  55.                      <h3 class="caption-title"><a href="#">欲与天公试比高</a></h3>
  56.                  </div>
  57.              </li>
  58.               <li>
  59.                  <img src="_images/p8.jpg" alt="人间仙境，室外桃园" />
  60.                  <div class="caption">
  61.                      <h3 class="caption-title"><a href="#">雪山天池</a></h3>
  62.                  </div>
  63.              </li>
  64.              <li>
  65.                  <img src="_images/p9.jpg" alt="山不转水转" />
  66.                  <div class="caption">
  67.                      <h3 class="caption-title"><a href="http://www.ldu.edu.cn/">山不转水转</a></h3>
  68.                  </div>
  69.              </li>
  70.          </ul>
  71.          <ul id="slider-controls" class="slider-controls"></ul>
  72.  
  73.      </div><!-- end of slider-container -->
  74.      <p>适用浏览器：Firefox、Chrome、Opera、Safari，不支持IE8以下浏览器</p>
  75.  </body>
  76.  </html>
  • slide.css
  1.  @charset "utf-8";
  2.  
  3.  /* 整体设置 */
  4.  html {
  5.      margin:0px;
  6.      padding:0px;
  7.  }
  8.  body {
  9.      background:#FF9;
  10.      font-size:62.5%;
  11.  }
  12.  
  13.  /* 页面标题 */
  14.  h1 {
  15.      font-family:"隶书","宋体","Times New Roman", Times, serif;
  16.      font-size:5em;
  17.      text-align:center;
  18.      color:red;
  19.      margin:10px auto;
  20.  }
  21.  
  22.  /* 图片容器的样式定义 */
  23.  .slider-container {
  24.      margin:0px auto;
  25.      background:#FFF;
  26.      width:800px;
  27.  }
  28.  
  29.  /* 图片列表的样式定义 */
  30.  ul {
  31.      list-style-type:none;
  32.  }
  33.  .slider-wrapper {
  34.      margin:0px;
  35.      padding:0px;
  36.      position:relative;
  37.      height:450px;
  38.      width:100%;
  39.      border:5px solid  #69F;
  40.      overflow:hidden;
  41.      z-index:;
  42.      box-shadow:8px 8px 4px #999999;
  43.  }
  44.  .slider-wrapper li {
  45.      display:none;
  46.  }
  47.  li.slide-first {
  48.      display:block;
  49.  }
  50.  .slider-wrapper li img {
  51.      position:absolute;
  52.      top:0px;
  53.      left:0px;
  54.      max-width:100%;
  55.      height: auto;
  56.  }
  57.  
  58.  /* 图片标题的样式定义 */
  59.  .caption {
  60.      position:absolute;
  61.      left:0px;
  62.      bottom:0px;
  63.      width:100%;
  64.      padding 10px;
  65.      background:rgba(0,0,0,0.6);
  66.      transform:translateY(100%);
  67.      -ms-transform:translateY(100%);     /* IE 9 */
  68.      -moz-transform:translateY(100%);     /* Firefox */
  69.      -webkit-transform:translateY(100%); /* Safari 和 Chrome */
  70.      -o-transform:translateY(100%);     /* Opera */
  71.  }
  72.  .slider-wrapper li:hover .caption {
  73.      transform:translateY(0%);
  74.      -ms-transform:translateY(0%);     /* IE 9 */
  75.      -moz-transform:translateY(0%);     /* Firefox */
  76.      -webkit-transform:translateY(0%); /* Safari 和 Chrome */
  77.      -o-transform:translateY(0%);     /* Opera */
  78.      transition:all 0.3s ease-in;
  79.      -ms-transition:all 0.3s ease-in; /* IE 9 */
  80.      -moz-transition:all 0.3s ease-in; /* Firefox */
  81.      -webkit-transition:all 0.3s ease-in; /* Safari 和 Chrome */
  82.      -o-transition:all 0.3s ease-in; /* Opera */
  83.  }
  84.  .caption-title {
  85.      font-size:1.6em;
  86.      color:#6FF;
  87.      font-weight:;
  88.      line-height:2em;
  89.  }
  90.  
  91.  .caption-title a {
  92.      color:#FFF;
  93.      font-size:2em;
  94.      text-decoration:none;
  95.  
  96.  }
  97.  .caption-title a:hover {
  98.      background:red;
  99.  
  100.  }
  101.  .caption-title a:active {
  102.      background:blue;
  103.  }
  104.  
  105.  /* 提示信息 */
  106.  p {
  107.      color:black;
  108.      font-size:2em;
  109.      text-align:center;
  110.      margin:50px 0;
  111.      line-height:2em;
  112.      margin:20px auto;
  113.  }
  114.  
  115.  /* 作者按钮 */
  116.  .author a {
  117.      font-family:"宋体";
  118.      color:white;
  119.      text-decoration:none;
  120.      font-size:2em;
  121.      border-radius:10px;
  122.      padding:5px 7px;
  123.      background:linear-gradient(#33C,#6CC);
  124.  }
  125.  .author a:hover {
  126.      background:linear-gradient(#FCF,#000);
  127.  }
  128.  /* 控制按钮 */
  129.  .slider-controls {
  130.      text-align: center;
  131.      margin-top: 15px;
  132.  }
  133.  .slider-controls li {
  134.      background:#FC6;
  135.      /*border-radius: 50%;*/
  136.      display:inline-block;
  137.      height: 12px;
  138.      width: 12px;
  139.      margin: 0px 4px;
  140.      cursor: pointer;
  141.  }
  142.  .slider-controls li.active {
  143.      background: red;
  144.  }
  145.
  • slide.js
  1.  /**
  2.   * 幻灯片JS脚本
  3.   */
  4.  $(function() {
  5.      var SliderModule = (function() {
  6.          var pb = {};
  7.          pb.el = $('#slider');  //el表达式
  8.          pb.items = {
  9.              panel: pb.el.find('li')  // 获得li集合
  10.          }
  11.  
  12.          // 变量
  13.          var SliderInterval,
  14.              currentSlider = 0,  //当前幻灯片
  15.              nextSlider = 1,     //下一张
  16.              lengthSlider = pb.items.panel.length;  // 幻灯片集合长度
  17.  
  18.          // 初始化
  19.          pb.init = function(settings) {
  20.              this.settings = settings || {duration: 8000}
  21.              var output = '';  // 输出的html语言
  22.  
  23.              // 初始化
  24.              SliderInit();
  25.  
  26.              for(var i = 0; i < lengthSlider; i++) {
  27.                  if (i == 0) {
  28.                      output += '<li class="active"></li>';
  29.                  } else {
  30.                      output += '<li></li>';
  31.                  }
  32.              }
  33.  
  34.              // 单击按钮时切换图片
  35.              $('#slider-controls').html(output).on('click', 'li', function (e){
  36.                  var $this = $(this);
  37.                  if (currentSlider !== $this.index()) {
  38.                      changePanel($this.index());
  39.                  };
  40.              });
  41.          }
  42.  
  43.          // 初始化方法
  44.          var SliderInit = function() {
  45.              SliderInterval = setInterval(pb.startSlider, pb.settings.duration);
  46.          }
  47.  
  48.          pb.startSlider = function() {
  49.              var panels = pb.items.panel,
  50.                  controls = $('#slider-controls li');
  51.  
  52.              if (nextSlider >= lengthSlider) {
  53.                  nextSlider = 0;
  54.                  currentSlider = lengthSlider-1;
  55.              }
  56.  
  57.              // 淡出淡入效果
  58.              controls.removeClass('active').eq(nextSlider).addClass('active');
  59.              panels.eq(currentSlider).fadeOut('slow');
  60.              panels.eq(nextSlider).fadeIn('slow');
  61.  
  62.              // 设置当前幻灯片
  63.              currentSlider = nextSlider;
  64.              nextSlider += 1;
  65.          }
  66.  
  67.          // 自动切换幻灯片
  68.          var changePanel = function(id) {
  69.              clearInterval(SliderInterval);
  70.              var panels = pb.items.panel,
  71.                  controls = $('#slider-controls li');
  72.  
  73.              // 幻灯片头尾
  74.              if (id >= lengthSlider) {
  75.                  id = 0;
  76.              } else if (id < 0) {
  77.                  id = lengthSlider-1;
  78.              }
  79.  
  80.              // 幻灯片淡出淡入
  81.              controls.removeClass('active').eq(id).addClass('active');
  82.              panels.eq(currentSlider).fadeOut('slow');
  83.              panels.eq(id).fadeIn('slow');
  84.  
  85.              // 当前幻灯片和下一张
  86.              currentSlider = id;
  87.              nextSlider = id+1;
  88.  
  89.              //重新初始化
  90.              SliderInit();
  91.          }
  92.  
  93.          return pb;
  94.      }());
  95.      // 图片切换速度 4000毫秒
  96.      SliderModule.init({duration: 4000});
  97.  });

欢迎各位大神批评指正，相互提高！

版权所有，允许转载，转载请注明出处，侵权必究！ 

JS+html--实现图片轮播的更多相关文章

  1. js定时器实现图片轮播

    效果展示如下: setInterval(moverleft,3000);定时器设置为3秒,而且实现图片下方的小圆点序号跟图片对应,点击小圆点也能切换图片. 代码如下: <!DOCTYPE htm ...

  2. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  3. html学习之路--简单图片轮播

    一个简单的图片轮播效果 photo.html页面代码,基本的HTML结构,在main中显示图片,此处图片依次命名为1.jpg.2.jpg.3.jpg.4.jpg. <!DOCTYPE html& ...

  4. 推荐一款超级漂亮的HTML5 CSS3的图片轮播器

    最近在学习HTML5和CSS3,印象最深的是CSS3的动画功能,不仅有浏览器原生支持,执行效率高,而且免去在js中自己管理timer. 本来想写一个图片轮播器练练手,结果在网上发现一个国人写的开源的图 ...

  5. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  6. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  7. 基于面向对象的图片轮播（js原生代码）

    无论你想走多远,你都需要不断地走下去.前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标,也提现这你的代码能力,开发的水平.废话不多说,进入今天的主要分享————基于面向对象思想的图 ...

  8. 图片轮播(左右切换)--JS原生和jQuery实现

    图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...

  9. 图片轮播(淡入淡出)--JS原生和jQuery实现

    图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...

随机推荐

  1. Binary Tree Paths leetcode

    Given a binary tree, return all root-to-leaf paths. For example, given the following binary tree: 1 ...

  2. CoreAnimation 开篇

    CoreAnimation 开篇 CoreAnimation系列博客是我对学习CoreAnimation的知识整理,博客排列顺序以及知识讲解存在欠缺望见谅. 博客的编写是在工作之余,尽量保证CoreA ...

  3. Servlet 3.0/3.1 中的异步处理

    在Servlet 3.0之前,Servlet采用Thread-Per-Request的方式处理请求,即每一次Http请求都由某一个线程从头到尾负责处理.如果一个请求需要进行IO操作,比如访问数据库.调 ...

  4. 使用mysql_Front链接mysql，出现警告access denied for user ''@'localhost'

    刚刚安装好的mysql5.7,想来使用工具方便一下,却一直有报这个错误: 最后找出原因:我给root用户设置的密码神不知鬼不觉的消失了,无奈, 解决办法一: cmd->mysql -h loca ...

  5. 009 Java集合浅析4

    前面一篇教程中,我们分析了List派别中的最常见也最重要的一个类ArrayList<E>.从我们的分析来看,ArrayList作为动态数组的模拟,使用的是连续内存空间来存储数据,带来了可随 ...

  6. golang http server分析(一)

    http:http请求过程实质上是一个tcp连接通信,具体通过socket接口编码实现 在go中是通过listenAndServer()方法对外提供了一个http服务,在该方法中完成了socket的通 ...

  7. C#传递委托给C或C++库报错__对XXX类型的已垃圾回收委托进行了回调

    出现的原因: 因为你传给C或C++的委托是局部的.可能传过去之后就被垃圾回收了,再次调用就会异常. 想办法做成全局的就好 public void Play(string url) { _bassStr ...

  8. SQLServer中间接实现函数索引或者Hash索引

    本文出处:http://www.cnblogs.com/wy123/p/6617700.html SQLServer中没有函数索引,在某些场景下查询的时候要根据字段的某一部分做查询或者经过某种计算之后 ...

  9. python编码问题之\"encode\"&\"decode\"

    python encode decode 编码 decode的作用是将其他编码的字符串转换成unicode编码,如str1.decode('gb2312'),表示将gb2312编码的字符串str1转换 ...

  10. linux 下日常使用便利工具

    Nautilus 你工作中有在GUI和命令行之间切来切去吗?当你总是要在命令行中输入你要进入的目录的时候,你有沮丧无奈过吗?如果有的话,那么,你一定要试下这个nautilus插件 —— nautilu ...