jQuery实现轮播图效果

我现在要实现的是点击左右按钮 实现左右切换

这是HTML的结构

<div class="carousel">
<div class="btn">
<a href="javascript:;" class="btn1"></a>
<a href="javascript:;" class="btn2"></a>
</div>
<ul class="imglist">
<li class="no0"><a href="#"><img src="images/0.png" /></a></li>
<li class="no1"><a href="#"><img src="images/1.png" /></a></li>
<li class="no2"><a href="#"><img src="images/2.png" /></a></li>
<li class="no3"><a href="#"><img src="images/3.png" /></a></li>
<li class="no4"><a href="#"><img src="images/4.png" /></a></li>
<li class="no5"><a href="#"><img src="images/5.png" /></a></li>
<li class="no6"><a href="#"><img src="images/6.png" /></a></li>
</ul>
</div>

这是CSS结构样式

因为我每一个li（图片）的样式都不一样所以我要分别给个li设置样式

<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.carousel{
position: relative;
670px;
height: 221px;
margin: 50px auto;
background: url(images/pic_bg.gif) no-repeat;
overflow: hidden;

}
.carousel .btn a{
position: absolute;
42px;
height: 42px;
top: 150px;
/*background-color: #f00;*/
}
.carousel .btn .btn1{
left: 25px;
}
.carousel .btn .btn2{
right: 25px;
}
.carousel .imglist li{
position: absolute;
}
.carousel .imglist .no0{
78px;
height: 53px;
left: -100px;
top: 70px;
}
.carousel .imglist .no1{
90px;
height: 60px;
left: 16px;
top: 63px;
}
.carousel .imglist .no2{
109px;
height: 82px;
left: 120px;
top: 40px;
}
.carousel .imglist .no3{
153px;
height: 100px;
left: 252px;
top: 21px;
}
.carousel .imglist .no4{
109px;
height: 82px;
left: 433px;
top: 40px;
}
.carousel .imglist .no5{
90px;
height: 60px;
left: 564px;
top: 63px;
}
.carousel .imglist .no6{
78px;
height: 53px;
left: 689px;
top: 70px;
}
.carousel .imglist li img{
100%;
height: 100%;
}
</style>

我现在要实现的是点击左右按钮 实现左右切换

jquery 代码

因为是用jQuery的库，所有要引入jQuery代码哦

$btn1 = $(".btn1");
$btn2 = $(".btn2");
// 定义新数组，接受每个位置的css样式对象
var styleArr = [];
// 遍历数组添加样式对象
for(var i = 0 ; i <= 6 ; i++){
styleArr.push({
"width" : $("li").eq(i).css("width"),
"height" : $("li").eq(i).css("height"),
"left" : $("li").eq(i).css("left"),
"top" : $("li").eq(i).css("top")
});
}
// console.log(styleArr);
// 建立类名数组
var nameArr = [];
// for(var i = 0 ; i <= 6 ;i++){
// nameArr.push($("li").eq(i).attr("class"));
// }
// 使用each简化
$("li").each(function(i){
nameArr.push($(this).attr("class"));
});
// console.log(nameArr);
// 右按钮事件
$btn2.click(function(){
// 防骚扰
if($("li").is(":animated")){
return;
}
// 后面的元素走到上一个位置
// $(".no3").animate({"width":109,"height":82,"left":120,"top":40},300);
// $(".no4").animate({"width":153,"height":100,"left":252,"top":21},300);
// 1-6位置的li走到前一个li的位置
for(var i = 1 ; i <= 6; i++){
$(".no"+i).animate(styleArr[i-1],300);
}
// 0位置的li直接更改css样式，切换到6的位置
$(".no0").css(styleArr[6]);
// 运动结束后，要让li的类名和位置统一，切换类名数组的位置
nameArr.unshift(nameArr.pop());
// console.log(nameArr);
// 循环给li添加新的类名
// for(var i = 0 ; i <= 6 ; i++){
// $("li").eq(i).attr("class",nameArr[i]);
// }
// 使用each简化
$("li").each(function(i){
$(this).attr("class",nameArr[i]);
});
});
// 左按钮事件
$btn1.click(function(){
// 防骚扰
if($("li").is(":animated")){
return;
}
// 前面的元素走到下一个位置
// 0-5位置的li走到下一个li的位置
for(var i = 0 ; i <= 5; i++){
$(".no"+i).animate(styleArr[i+1],300);
}
// 6位置的li直接更改css样式，切换到0的位置
$(".no6").css(styleArr[0]);
// 运动结束后，要让li的类名和位置统一，切换类名数组的位置、

//将第一项删除，添加到最后一项
nameArr.push(nameArr.shift());
// console.log(nameArr);
// 循环给li添加新的类名
// for(var i = 0 ; i <= 6 ; i++){
// $("li").eq(i).attr("class",nameArr[i]);
// }
// 使用each简化
$("li").each(function(i){
$(this).attr("class",nameArr[i]);
});
});