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

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