jQuery实现轮播图

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>

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;
      width: 600px;
      /*浮在左侧*/
    }

    /*包含所有圆点按钮的<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>

js：

<script src="./js/jquery.1.10.2.js"></script>
  <!-- <script type="text/javascript" src="js/app.js"></script> -->
  <script> $(function () {
      //用于操作鼠标移入停止播放 -->
      var $container = $('#container')
      //用于操作切换图片 -->
      var $list = $('#list')
      //用于操作小黑点 -->
      var $points = $('#pointsDiv>span')
      //操作两个按键 -->
      var $prev = $('#prev')
      var $next = $('#next')
      var PAGE_WIDTH = 600
      var TIME = 400 //总偏移时间TIME
      var ITEM_TIME = 20 //单元格移动时间
      var imageCount = $points.length //轮播图的有效数量
      var index = 0 //最初索引
      var moving = false //标识是否正在翻页


      //点击监听切换图片 -->
      $prev.click(function () {
        //平滑翻到上一页 -->
        // alert($list.position().left)
        nextPage(false)
      })
      $next.click(function () {
        //< !--平滑翻到下一页 -->
        nextPage(true)
      })
      // 添加点时器实现自动换页
      var change = setInterval(function () {
        nextPage(true)
      }, 2000)
      // 设置鼠标移入移出控制是否自动换页
      $container.hover(function () {
        clearInterval(change)
      }, function () {
        change = setInterval(function () {
          nextPage(true)
        }, 2000)
      })

      //平滑翻页
      function nextPage(next) {
        //判断是否正在执行翻译
        if (moving) {
          return
        }
        moving = true

        // 总偏移量offset判断点击的是prev还是next，用于计算点击后的偏移量
        if (typeof next == 'boolean') {
          var offset = next ? - PAGE_WIDTH : PAGE_WIDTH //600
        } else {
          offset = -(next - index) * PAGE_WIDTH
        }
        //总偏移时间TIME，单元移动时间ITEM_TIME
        //单元移动距离：itemOffset = PAGE_WIDTH/(TIME/ITEM_TIME)
        // 获取当前的偏移量
        var currentLeft = Math.floor($list.position().left)//这里有问题不是整数
        // alert(currentLeft)
        //目标偏移量
        var targetLeft = currentLeft + offset
        //一节偏移量
        var itemOffset = offset / (TIME / ITEM_TIME)
        var ding = setInterval(function () {
          currentLeft += itemOffset //每次多偏移一节
          // 当currentLeft == targetLeft时，说明itemOffet递增的值等于了offset，到达了目标偏移位置
          if (currentLeft == targetLeft) {
            if (currentLeft == -(imageCount + 1) * PAGE_WIDTH) {
              currentLeft = -PAGE_WIDTH
            } else if (currentLeft == 0) {
              currentLeft = -imageCount * PAGE_WIDTH
            }
            clearInterval(ding)

            //翻页停止
            moving = false
          }
          $list.css('left', currentLeft)
        }, ITEM_TIME)
        //更新圆点
        undatePoints(next)
      }
      function undatePoints(next) {
        //计算出目标圆点的下标
        //因为有效图片和实际放入的图片数量有差别，所以应该考虑targetIndex等于-1和imageCount的情况
        var targetIndex = 0
        if (typeof next == 'boolean') {
          if (next) {
            targetIndex = index + 1
            if (targetIndex == imageCount) {
              targetIndex = 0
            }
          } else {
            targetIndex = index - 1
            if (targetIndex == -1) {
              targetIndex = imageCount - 1
            }
          }
        } else {
          targetIndex = next
        }
        //将当前index的span标签上的class移除
        $points.eq(index).removeClass('on')
        // $points[index].className = ''//这是原生js的方式
        //给目标圆点添加
        $points.eq(targetIndex).addClass('on')
        //为index指定新的值
        index = targetIndex
      }
      //点击圆点翻页
      $points.click(function () {
        //目标页的下标
        var targetIndex = $(this).index()
        //只有当点击的不是当前页的圆点时才翻页
        if (targetIndex != index) {
          nextPage(targetIndex)
        }
      })


    })</script>