图片轮播

html

<div class="lb">
<ul class="pic">
    <li class="a1"><img src="images/pic1.jpg"/></li>
        <li class="a2"><img src="images/pic2.jpg"/></li>
        <li class="a3"><img src="images/pic3.jpg"/></li>
    </ul>
    <div class="left"></div>
     <div class="right"></div>
    
    
</div>

css

*{ margin:0px;padding:0px; text-decoration:none; list-style:none;}
.lb{width:1000px; height:400px; overflow:hidden; margin:0px auto; background:#CCC; position:relative;}
.lb .pic li {position:absolute;width:600px; height:400px;}
.lb .pic li img{width:600px; height:400px;}
.lb .pic li.a1{ left:-80px; transform:scale(0.5,0.5);z-index:20;}
.lb .pic li.a2{left:200px;z-index:35;transform:scale(1,1);}
.lb .pic li.a3{left:480px; transform:scale(0.5,0.5);z-index:30;}
.lb .left{ width:50px; height:100px; background:url(images/left.png); position:absolute; left:0px; top:130px; z-index:50; opacity:0.0; transition:0.5s;}
.lb .right{ width:50px; height:100px; background:url(images/right.png); position:absolute; right:0px; top:130px; z-index:50;opacity:0.0;transition:0.5s}
.lb:hover .left{ opacity:0.5;}
.lb:hover .right{ opacity:0.5;}
.lb .left:hover,.lb .right:hover{ opacity:0.8;}

jquery

$(function(){
var cls=["a1","a2","a3"];//样式数组
$(".left").click(function(){

var t=cls[2];//保存第3个
cls[2]=cls[1];//第二个往后移动
cls[1]=cls[0];//第一个往后
cls[0]=t;
console.info(cls);
$(".pic li").eq(0).removeClass().addClass(cls[0]);
$(".pic li").eq(1).removeClass().addClass(cls[1]);
$(".pic li").eq(2).removeClass().addClass(cls[2]);


});
$(".right").click(function(){

var t=cls[0];//保存第3个
cls[0]=cls[1];//第二个往后移动
cls[1]=cls[2];//第一个往后
cls[2]=t;
console.info(cls);
$(".pic li").eq(0).removeClass().addClass(cls[0]);
$(".pic li").eq(1).removeClass().addClass(cls[1]);
$(".pic li").eq(2).removeClass().addClass(cls[2]);


});


})