仿京东轮播图详解版jQuery

1.效果图

动态效果详解:
（1） 鼠标离开时,自动切换图片,底部小圆点按钮也跟着变化。
（2） 鼠标移入图片，显示左右箭头，停止自动轮播。
（3）鼠标移入左右箭头时，改变当前移入箭头的背景颜色。
（4）点击右边箭头，切换到下一张图片，对应下标的小圆点按钮样式改变。
（5）点击左边箭头，切换到上一张图片，对应下标的小圆点按钮样式改变。
（6）鼠标移入底部小圆点按钮，当前移入的小圆点按钮样式改变，且显示对应下标的图片。

2.HTML部分

2.1 思路分析

（1）首先要有一个div父盒子,用来显示当前图片,盒子宽高和图片宽高一致。
（2）div里包括三个子元素，一个ul标签，用来存放所有图片，两个div，一个用来放左右箭头，另一个放底部小圆点按钮。

2.2 代码

<div class="slider">
    <!--ul中存放所有图片,图片大小保持一致-->
    <ul>
      <li>
        <a href="#">
          <img src="images/1.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="images/2.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="images/3.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="images/4.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="images/5.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="images/6.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="images/7.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="images/8.jpg" alt="">
        </a>
      </li>
    </ul>
    <!--左右箭头-->
    <div class="arrow">
      <span class="arrow-left">&lt;</span>
      <span class="arrow-right">&gt;</span>
    </div>
    <!-- 小圆点按钮 -->
    <div class="focus">
      <i class="current"></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
    </div>
  </div>

3.CSS部分

3.1 代码

<style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .slider {
      height: 340px;
      width: 790px;
      margin: 100px auto;
      position: relative;/* 注意此处一定不要忘记定位 */
    }
    /* 所有li隐藏 */
    .slider li {
      position: absolute;
      display: none;
    }
  /* 显示第一个li */
    .slider li:first-child {
      display: block;
    }

    /* 左右箭头默认隐藏 */
    .arrow {
      display: none;
    }
    /* 鼠标移入div,显示左右箭头 */
    .slider:hover .arrow {
      display: block;
    }
    /* 左右箭头样式 */
    .arrow-left,
    .arrow-right {
      font-family: "SimSun", "宋体";
      width: 30px;
      height: 60px;
      background-color: rgba(0, 0, 0, 0.1);
      position: absolute;
      top: 50%;
      margin-top: -30px;
      cursor: pointer;
      text-align: center;
      line-height: 60px;
      color: #fff;
      font-weight: 700;
      font-size: 30px;
    }
    /* 鼠标移入箭头,改变背景颜色 */
    .arrow-left:hover,
    .arrow-right:hover {
      background-color: rgba(0, 0, 0, .5);
    }

    .arrow-left {
      left: 0;
    }

    .arrow-right {
      right: 0;
    }
  /* 给底部小圆点按钮设置定位 */
    .slider .focus {
      position: absolute;
      bottom: 20px;
      left: 46px;
      z-index: 1;
    }
  /* 给底部小圆点按钮设置样式 */
    .slider .focus i {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.5);
      text-align: center;
    }
    /* current类名,用于事件处理时,给小圆点按钮动态添加类名,改变样式 */
    .current {
      background: #fff;
      transition: .4s all;
    }
  </style>

4.JS部分

 <!-- 注意先引入jquery源码,再使用 -->
  <script>
    $(function () {
      var index = 0;//用index记录下标,默认为0
      var lis = $('.slider li');
      //1.右边箭头点击事件
      $('.arrow-right').click(right);
      //右箭头点击事件处理函数
      function right() {
        index++; 
        //如果当前是最后一张,此时index=lis.length-1,index++后index=lis.length
        // 此时应让index=0
        if (index == lis.length) {
          index = 0;
        }
        //显示对应下标的图片,让其他兄弟隐藏
        lis.eq(index).fadeIn().siblings().fadeOut();
        //给对应下标的小圆点按钮添加current类名,其他兄弟移除current类名
        $('.focus i').eq(index).addClass('current').siblings().removeClass('current');
      }
      //2.左边箭头点击事件
      $('.arrow-left').click(function () {
        index--;
        //如果当前是第一张(index=0),index--后,index<0,此时应显示最后一张,让index=lis.length-1
        if (index < 0) {
          index = lis.length - 1;
        }
        //显示对应下标的图片,让其他兄弟隐藏
        lis.eq(index).fadeIn().siblings().fadeOut();
        //给对应下标的小圆点按钮添加current类名,其他兄弟移除current类名
        $('.focus i').eq(index).addClass('current').siblings().removeClass('current');
      })

      //3.底部圆点按钮鼠标移入事件
      btns = $('.focus i');
      for (var i = 0; i < btns.length; i++) {
        //设置index属性,记录当前下标
        btns.eq(i).attr('index', i);
        //给btn注册鼠标移入事件
        btns.eq(i).mouseenter(fn);
      }
      //btn的事件处理函数
      function fn() {
        var index = $(this).attr('index');
        lis.eq(index).fadeIn().siblings().fadeOut();
        $(this).addClass('current').siblings().removeClass('current');
      }

      //4.自动轮播
        //先执行一次定时器
      var timeid = setInterval(function () {
        right()
      }, 3000)
        //鼠标移出div时,设置定时器,调用右边箭头的点击事件
      $('.slider').mouseleave(function () {
        timeid = setInterval(function () {
          right()
        }, 3000)
      })
      //鼠标移入div时,清除定时器
      $('.slider').mouseenter(function(){
        clearInterval(timeid)
      })

    })
  </script>

总结：

轮播图的实现思路基本一致，只要掌握了基本思路,就能很容易的写出来了。
以上的代码注释纯属个人理解，如有不足之处，望指正。

注：转载请引用。