基于jq-视差翻转式轮播

        

            

                
![](img/slidepic1.jpg)
                
![](img/slidepic2.jpg)
                
![](img/slidepic3.jpg)
                
![](img/slidepic4.jpg)
                
![](img/slidepic5.jpg)
            
            

                
                
            
        
    

$(function(){
    var $slidepic = $('#slidepic');
    var aLi = $slidepic.find('li');
    var timer = null;
    var off = true;
    //定义li定位数据
    var pos = [
        {
            width:564,
            height:330,
            left:34,
            top:0,
            opacity:0,
            z:2
        },
        {
            width:564,
            height:330,
            left:34,
            top:79,
            opacity:0.8,
            z:3
        },
        {
            width:800,
            height:500,
            left:200,
            top:0,
            opacity:1,
            z:4
        },
        {
            width:564,
            height:330,
            left:605,
            top:79,
            opacity:0.8,
            z:3
        },
        {
            width:564,
            height:330,
            left:605,
            top:0,
            opacity:0,
            z:2
        }
    ]
    //设置li定位
    fnMove()
    //上一个按钮
    $slidepic.find('.prev').on('click',function(){
        if(off){
            off = false;
            fnMove(true)    
        }
    })
    //下一个按钮
    $slidepic.find('.next').on('click',function(){
        if(off){
            off = false;
            fnMove(false)   
        }
    })
    //li运动函数
    function fnMove(b){
        if(typeof(b) != 'undefined'){//判断参数有没有传，没有就设置li位置，传了就是按钮点击
            if(b){
                pos.push(pos.shift())
            }else{
                pos.unshift(pos.pop())
            }
        }
        $.each(pos, function(i, val) {
            aLi.eq(i).css('z-index',pos[i].z).stop().animate(pos[i],500,function(){
                off = true;
            });
        });
    }
    //开启定时器自动播放
    timer = setInterval(function(){
        fnMove(true)
    },5000)
    //暂停继续播放，显示隐藏左右切换按钮
    $slidepic.hover(function(){
        clearInterval(timer)
        $(this).find('.toggle').fadeIn();
    },function(){
        clearInterval(timer)
        timer = setInterval(function(){
            fnMove(true)
        },5000)
        $(this).find('.toggle').fadeOut();
    })
})

blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
ol,ul{list-style:none}
a{text-decoration:none}
fieldset,img{border:0;vertical-align:top;}
a,input,button,select,textarea{outline:none;}
a,button{cursor:pointer;}
.wrap{
    width:1200px;
    margin-left:auto;
    margin-right:auto
}
.slidepic{
    position: relative;
    height: 500px;
}
.slidepic ul{
    position: absolute;
    left:0;
    top:0;
    z-index: 1;
}
.slidepic li{
    position: absolute;
    width: 800px;
    height: 500px;
    left:200px;
    top:0;
    background-color: #6475ae;
}
.slidepic img{
    width: 100%;
    height: 100%;
}
.toggle{
    position: absolute;
    z-index:10;
    width: 100%;
    height: 100%;
    display: none;
}
.toggle a{
    position: absolute;
    left:100px;
    top:50%;
    width: 76px;
    height: 112px;
    margin-top: -56px;
    background:url(../img/prev.png) 0 0 no-repeat;
}
.toggle .next{
    right: 100px;
    left: auto;
    background-image:url(../img/next.png);
}