图片轮播效果

今天有点空，写了个图片轮播的效果，使用了jq，直接上代码吧。

效果：http://edwardzhong.github.io/blog/2014/10/31/slidePics.html

html如下：

<div class="wrap">
    <div class="left fl">&lt;</div>
    <div class="right fr">&gt;</div>
    <div class="pics">
        <ul class="clearfix">
            <li><img src="../images/Chrysanthemum.jpg" alt="" /></li>
            <li><img src=../images/Desert.jpg" alt="" /></li>
            <li><img src="../images/Hydrangeas.jpg" alt="" /></li>
            <li><img src="../images/Jellyfish.jpg" alt="" /></li>
            <li><img src="../images/Koala.jpg" alt="" /></li>
            <li><img src="../images/Lighthouse.jpg" alt="" /></li>
            <li><img src="../images/Penguins.jpg" alt="" /></li>
            <li><img src="../images/Tulips.jpg" alt="" /></li>
        </ul>
    </div>
</div>

样式如下：

<style>
    .wrap{
        width: 800px;
        margin: 0 auto;
        border:1px solid #ddd;
    }
    .left,.right{
        width: 20px;
        height: 240px;
        line-height: 240px;
        background-color: #ddd;
        cursor: pointer;
        color:#666;
        font-size: 30px;
        font-weight: bold;

    }
    .clearfix:after{
        content: ‘.‘;
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;
    }
    .clearfix{zoom:1;}
    .fl{float: left;}
    .fr{float: right;}
    .pics{
        height: 240px;
        margin:0 20px;
    }
    .pics img{
        width: 100%;
        opacity: 1;filter: alpha(opacity=100);
    }
    .pics ul{
        list-style-type: none;
        margin: 0;padding: 0;
        position: relative;
    }
    .pics ul li{
        position: absolute;
        top:60px;right:380px;
        width: 160px;
        height: 120px;
        background-color: #000;
        display: none;
        cursor: pointer;
    }
</style>

js如下：

<script>
$(function(){
    //轮播使用到的5张图片
    var s=[
        {i:3,zIndex:5,opacity: 1,animate:{top:‘0‘,left:‘220px‘,width:‘320px‘,height:‘240px‘}},
        {i:2,zIndex:4,opacity: 0.5,animate:{top:‘22px‘,left:‘100px‘,width:‘260px‘,height:‘195px‘}},
        {i:4,zIndex:3,opacity: 0.5,animate:{top:‘22px‘,left:‘400px‘,width:‘260px‘,height:‘195px‘}},
        {i:1,zIndex:2,opacity: 0.2,animate:{top:‘60px‘,left:‘30px‘,width:‘160px‘,height:‘120px‘}},
        {i:5,zIndex:1,opacity: 0.2,animate:{top:‘60px‘,left:‘570px‘,width:‘160px‘,height:‘120px‘}}
    ],
    //隐藏的图片
    hid={zIndex:0,top:‘60px‘,left:‘380px‘,width:‘160px‘,height:‘120px‘,opacity: 1,display:‘none‘},
    lis=[].slice.call($(‘.pics li‘)),len=lis.length,slen=s.length,i,
    timer=null,lflag,rflag;
    //初始化
    function init(){
        if(len<s.length){
            slen=s.length=len;
        }
        s.sort(function(a,b){
            return a.i-b.i;
        });
        i=Math.floor(slen/2);
        while(i--){
            slideRight();
        }
        animate(400);
    }
    //执行动画
    function animate(interval){
        $(lis).each(function(i){
            if(s[i]){
                $(this).attr("i",i)
                .css({zIndex:s[i].zIndex})
                .animate(s[i].animate, interval).show()
                .children(‘img‘).animate({opacity:s[i].opacity}, interval);
            }else{
                $(this).css(hid);
            }
        });
    }
    //将元素第1项移到队列尾部从而实现向右移动的效果
    function slideLeft(){
        lis.push(lis.shift());
    }
    //将元素最后1项移到队列头部从而实现向左移动的效果
    function slideRight(){
        lis.unshift(lis.pop());
    }
    //轮播
    function next(){
        timer=setInterval(function(){
            slideLeft();
            animate(400);
        },2000);
    }
    //绑定向左向右事件
    //鼠标移入，清除自动播放，移开时添加自动播放，点击执行向/左向右滚动
    //同时控制点击间隔为300ms
    lflag=rflag=true;
    $(‘.left‘).click(function(event){
        if(!lflag){return;}
        slideLeft();
        animate(400);
        lflag=false;
        setTimeout(function(){
            lflag=true;
        },300);
    }).mouseover(function(){
        clearInterval(timer);
    }).mouseout(next);
    $(‘.right‘).click(function(){
        if(!rflag){return;}
        slideRight();
        animate(400);
        rflag=false;
        setTimeout(function(){
            rflag=true;
        },300);
    }).mouseover(function(){
        clearInterval(timer);
    }).mouseout(next);

    //鼠标移入ul时，清除自动播放，移开时添加自动播放
    $(‘.pics ul‘).mouseover(function() {
        clearInterval(timer);
    }).mouseout(next);

    //点击两侧的图片将立即移动到中间显示
    $(‘.pics‘).on(‘click‘, ‘li‘, function(event) {
        var index=$(this).attr(‘i‘),interval=300;
        index=index-Math.floor(slen/2);
        if(index<0){
            index=Math.abs(index);
            interval=interval/index;
            while(index--){
                slideRight();
                animate(interval);
            }
        }else if(index>0){
            interval=interval/index;
            while(index--){
                slideLeft();
                animate(interval);
            }
        }
    });

    init();
    next();
});
</script>