jquery+css实现简单的图片轮播效果

<div class="banner">    <!--第一张图片为最后一张，用来做轮播连接使用，所以一开始显示的第一章，应是第二张图片，这里图片的宽度为1170px，所以一开始left为-1170px，同理最后一张图也为第一张图。-->  <div class="pic-list" style="left: -1170px">    <img src="/static/img/4.jpg" alt="">    <img src="/static/img/1.jpg" alt="">    <img src="/static/img/2.jpg" alt="">    <img src="/static/img/3.jpg" alt="">    <img src="/static/img/4.jpg" alt="">    <img src="/static/img/1.jpg" alt="">  </div>  <div id="buttons">    <!-- 确保span的数量跟img数量一样多，不包括第一张img和最后一张img-->    <span class='on'></span>    <span></span>    <span></span>    <span></span>  </div>  <a href="javascript:;" class="arrow" id="prev"><</a>  <a href="javascript:;" class="arrow" id="next">></a></div>

.banner{  width: 100%;  height: 500px;  overflow: hidden;  position: relative;}.banner a{  text-decoration: none;}.banner .pic-list{  width: 10000px;  height: 500px;  position: absolute;  z-index: 1;}.banner .pic-list img{  width: 1170px;  float: left;}#buttons{  position: absolute;  z-index: 2;  height: 10px;  bottom: 20px;  left: 550px;}#buttons span{  cursor: pointer;  float: left;  border: 1px solid #fff;  width: 10px;  height: 10px;  border-radius: 50%;  background: #333;  margin-right: 5px;}#buttons .on{  background: orange;}.arrow{  cursor: pointer;  line-height: 36px;  text-align: center;  font-size: 20px;  font-weight: bold;  width: 40px;  height: 40px;  position: absolute;  z-index: 2;  top: 200px;  background: rgba(0,0,0,0.5);  color: #fff;  display: none;}.banner:hover .arrow{display: block;}#prev{  left: 20px;}#next{  right:20px;}

$(document).ready(function(){  var picNum = 4;//图片数量，根据实际修改  var picWidth = 1170;//图片的宽度，根据实际修改  var picMaxWidth = -1 * picNum * picWidth;  var currentPic = 1;  var next = $('#next');  var prev = $('#prev');  var flag = false;  prev.on('click',function(){    if(!flag){      calPx(1170);      currentPic--;      if (currentPic < 1) {        currentPic = picNum;      }      $('#buttons span').eq(currentPic-1).addClass('on').siblings().removeClass('on');    }  });  next.on('click',function(){    if(!flag){      calPx(-1170);      currentPic++;      if (currentPic > picNum) {        currentPic = 1;      }      $('#buttons span').eq(currentPic-1).addClass('on').siblings().removeClass('on');    }  });  $('.banner').on('mouseover',function(){    stop();  }).on('mouseout',function(){    play();  })  function nextClick(){    next.click();  }  function play(){    setInt = setInterval(nextClick,2000);  }  function stop(){    clearInterval(setInt);  }  function calPx(leftPx){    flag = true;    var left = parseInt($('.pic-list').css('left'));    var newLeft = left+leftPx;    var time = 300;    var interval = 10;    var speed = leftPx/(time/interval);    function go(){      var left = parseInt($('.pic-list').css('left'));      if((speed < 0 && left > newLeft) || (speed > 0 && left < newLeft)){        $('.pic-list').css('left', (left + speed) + 'px');        setTimeout(go,interval);      }else{        flag = false;        if( newLeft > -1170){          newLeft = picMaxWidth;        }else if (newLeft < picMaxWidth ) {          newLeft = -1170;        }        $('.pic-list').css('left',newLeft + 'px');      }    }    go();  }  play();});