jQuery实现轮播图

本篇文章主要讲述通过jQuery来定义轮播图 相对原生js来说代码量减少了很多 得益于jQuery强大的选择器

下一篇文章将通过原生js对轮播图进行解析

功能说明:
1. 点击向右(左)的图标, 平滑切换到下(上)一页
2. 无限循环切换: 第一页的上一页为最后页, 最后一页的下一页是第一页
3. 每隔3s自动滑动到下一页
4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换
5. 切换页面时, 下面的圆点也同步更新
6. 点击圆点图标切换到对应的页

bug: 快速点击时, 翻页不正常

附上最终效果图

注意：这里的bug并非取消定时器就可以解决  而是需要设置一个状态来直观的表现此时是正在轮播

　　　如果是则直接退出 如果不是则继续进行  以上在代码区域会着重写出

bug示意图

以下为HTML代码

<div id="container">
  <div id="list" style="left: -600px;">
    <img src="img/5.jpg" alt="5"/>
    <img src="img/1.jpg" alt="1"/>
    <img src="img/2.jpg" alt="2"/>
    <img src="img/3.jpg" alt="3"/>
    <img src="img/4.jpg" alt="4"/>
    <img src="img/5.jpg" alt="5"/>
    <img src="img/1.jpg" alt="1"/>
  </div>
  <div id="pointsDiv">
    <span index="1" class="on"></span>
    <span index="2"></span>
    <span index="3"></span>
    <span index="4"></span>
    <span index="5"></span>
  </div>
  <a href="javascript:;" id="prev" class="arrow">&lt;</a>
  <a href="javascript:;" id="next" class="arrow">&gt;</a>
</div>
<script type="text/javascript" src="../js/jquery-1.10.1.js"></script>
<script type="text/javascript" src="app.js"></script>

 以下为css代码

<style type="text/css">
    /*去除内边距,没有链接下划线*/
    * {
      margin: 0;
      padding: 0;
      text-decoration: none;
    }

    /*让<body有20px的内边距*/
    body {
      padding: 20px;
    }

    /*最外围的div*/
    #container {
      width: 600px;
      height: 400px;
      overflow: hidden;
      position: relative; /*相对定位*/
      margin: 0 auto;
    }

    /*包含所有图片的<div>*/

    #list {
      width: 4200px; /*7张图片的宽: 7*600 */
      height: 400px;
      position: absolute; /*绝对定位*/
      z-index: 1;

    }

    /*所有的图片<img>*/
    #list img {
      float: left; /*浮在左侧*/
    }

    /*包含所有圆点按钮的<div>*/
    #pointsDiv {
      position: absolute;
      height: 10px;
      width: 100px;
      z-index: 2;
      bottom: 20px;
      left: 250px;
    }

    /*所有的圆点<span>*/

    #pointsDiv span {
      cursor: pointer;
      float: left;
      border: 1px solid #fff;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #333;
      margin-right: 5px;
    }

    /*第一个<span>*/

    #pointsDiv .on {
      background: orangered;
    }

    /*切换图标<a>*/

    .arrow {
      cursor: pointer;
      display: none;
      line-height: 39px;
      text-align: center;
      font-size: 36px;
      font-weight: bold;
      width: 40px;
      height: 40px;
      position: absolute;
      z-index: 2;
      top: 180px;
      background-color: RGBA(0, 0, 0, 0.3);
      color: #fff;
    }

    /*鼠标移到切换图标上时*/
    .arrow:hover {
      background-color: RGBA(0, 0, 0, 0.7);
    }

    /*鼠标移到整个div区域时*/
    #container:hover .arrow {
      display: block; /*显示*/
    }

    /*上一个切换图标的左外边距*/
    #prev {
      left: 20px;
    }

    /*下一个切换图标的右外边距*/
    #next {
      right: 20px;
    }
  </style>

以下为JavaScript代码

$(function () {
 
  var $container=$("#container")
  var $list=$("#list")
  var $points=$('#pointsDiv>span')
  var $prev=$('#prev')
  var $next=$('#next')

  var PAGE_WIDTH = 600 //一页的宽度
  var time=400 //总时间
  var ITEM_TIME=20
  // var TIME = 400 // 翻页的持续时间
  // var ITEM_TIME = 20 // 单元移动的间隔时间
  var imgCount = $points.length
  var index = 0 //当前下标
   var moving = false // 标识是否正在翻页(默认没有)

  $prev.click(function () {
    // 平滑翻到下一页
    nextPage(false)
  })

  $next.click(function () {
    // 平滑翻到下一页
    nextPage(true)
  })
  //3. 每隔3s自动滑动到下一页
  var timer=setInterval(function () {
    nextPage(true)
  },3000)

  // 4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换

  $container.hover(function () {
    clearInterval(timer)
  },function () {
    timer=setInterval(function () {
      nextPage(true)
    },3000)
  })


  //6. 点击圆点图标切换到对应的页
  $points.click(function () {
    var targetIndex=$(this).index()
    if(targetIndex!=index){
      nextPage(targetIndex)
    }
  })
  
  
  //next可以传true  false
  //next传数字  则需要判断
  function  nextPage (next) {
    // if(moving){
    //   return
    // }
    // // 7.如果此时正在翻页 直接返回 后面均不执行
    // moving=true  //此时正在翻页
    var currentLeft=$list.position().left  //这个left可能取到移动一半时候的值
    var offset=0
    if(typeof next==="boolean"){
       offset=next ? -PAGE_WIDTH:PAGE_WIDTH  //总长度
    }else{
       offset=-(next-index) * PAGE_WIDTH
    }

   // $list.css('left' ,offset+currentLeft)
    //计算目标left
    var targetleft=currentLeft+offset

    var itemdistance=offset/(time/ITEM_TIME) //单位移动距离
    var timer=setInterval(function () {
      currentLeft += itemdistance


      if(currentLeft===targetleft) {
        clearInterval(timer)

        moving = false   //此时翻页结束


        //2.  如果到达了最右边的图片(1.jpg), 跳转到最左边的第2张图片(1.jpg)
        if (currentLeft === -(imgCount + 1) * PAGE_WIDTH) {
          currentLeft = -PAGE_WIDTH
        }
        else if (currentLeft === 0) {
          // 如果到达了最左边的图片(5.jpg), 跳转到最右边的第2张图片(5.jpg)
          currentLeft = -imgCount * PAGE_WIDTH
        }

      }
      $list.css('left' ,currentLeft)
    },ITEM_TIME)

    //5. 切换页面时, 下面的圆点也同步更新
    updaPoints(next) //更新圆点
  }
  
function updaPoints (next) {
  var currentIndex = 0
  if(typeof next==="boolean"){
    if (next)
    {
      currentIndex = index + 1
      if (currentIndex === imgCount) {// 此时看到的是1.jpg-->第1个圆点
        currentIndex = 0
      }
    }else {
      currentIndex = index - 1
      if (currentIndex === -1) { // 此时看到的是5.jpg-->第5个圆点
        currentIndex = imgCount - 1
      }
    }

  }else{
    currentIndex=next
  }


  // 将当前index的<span>的class移除
  // $points.eq(index).removeClass('on')
  $points[index].className = ''
  // 给目标圆点添加class='on'
  // $points.eq(currentIndex).addClass('on')
  $points[currentIndex].className = 'on'

  // 将index更新为currentIndex
  index = currentIndex
}
})