jquery+css實現簡單的圖片輪播效果

<div class="banner">
 <!--第一張圖片為最后一張，用來做輪播連接使用，所以一開始顯示的第一章，應是第二張圖片，這里圖片的寬度為1170px，所以一開始left為-1170px，同理最后一張圖也為第一張圖。-->
 <div class="pic-list" style="left: -1170px">
 <img src="https://www.gxlcms.com/static/img/4.jpg" alt="">
 <img src="https://www.gxlcms.com/static/img/1.jpg" alt="">
 <img src="https://www.gxlcms.com/static/img/2.jpg" alt="">
 <img src="https://www.gxlcms.com/static/img/3.jpg" alt="">
 <img src="https://www.gxlcms.com/static/img/4.jpg" alt="">
 <img src="https://www.gxlcms.com/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();

});