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

開發過程中需要用到圖片輪播的外掛，在網上找了幾個外掛之後還是決定自己碼一個，比較簡潔的功能，以後說不定還會有用。

ps：
功能比較簡單，整個框並不能根據圖片的大小自動調節，這裡所用的圖片是1170*500的，如果需要改成其他大小的圖片，自行修改.pic-list下img的寬度。

.pic-list中的寬度為整個橫幅的寬度，如果需要輪播的圖片數量很多，.pic-list的寬度應大於數量*單張寬度，

html

<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">&lt;</a>
    <a href="javascript:;" class="arrow" id="next">&gt;</a>
</div>

css

.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;
}

js

$(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();

});