图片轮播 按钮 自动 循环

这图片轮播已经可以按钮轮播，自动轮播，循环，但还是有些许BUG，还存在些问题，而且代码也有点复杂，但能实现，期待以后可以接触到更简洁的方式。

 

c = 1;
a.eq(0).css("background-color","blue")
function moveleft(){
if(c != 4) {
da.stop();
da.animate({
marginLeft: c * (-620) + "px"
},
500,
function() {
c++;
})
}
if(c==4){
da.animate({margin:0+"px"},1000,function(){})
}
if(c==1){
a.eq(1).css("background-color","blue")
a.eq(0).css("background-color","orange")
a.eq(2).css("background-color","orange")
a.eq(3).css("background-color","orange")
}
if(c==2){
a.eq(2).css("background-color","blue")
a.eq(0).css("background-color","orange")
a.eq(1).css("background-color","orange")
a.eq(3).css("background-color","orange")
}
if(c==3){
a.eq(3).css("background-color","blue")
a.eq(0).css("background-color","orange")
a.eq(2).css("background-color","orange")
a.eq(1).css("background-color","orange")
}
}
// window.setInterval(moveleft,2000);



left.click(function() {
moveleft();
})

right.click(function() {
if(c != 1) {
da.stop();
da.animate({
marginLeft: (c - 2) * (-620) + "px"
},
500,
function() {
c--;
})
}
if(c==2){
a.eq(0).css("background-color","blue")
a.eq(1).css("background-color","orange")
a.eq(2).css("background-color","orange")
a.eq(3).css("background-color","orange")
}
if(c==3){
a.eq(1).css("background-color","blue")
a.eq(0).css("background-color","orange")
a.eq(2).css("background-color","orange")
a.eq(3).css("background-color","orange")
}
if(c==4){
a.eq(2).css("background-color","blue")
a.eq(0).css("background-color","orange")
a.eq(1).css("background-color","orange")
a.eq(3).css("background-color","orange")
}
if(c==5){
a.eq(3).css("background-color","blue")
a.eq(0).css("background-color","orange")
a.eq(2).css("background-color","orange")
a.eq(1).css("background-color","orange")
}
})

a.eq(0).click(function() {
a.eq(0).css("background-color","blue")
a.eq(1).css("background-color","orange")
a.eq(2).css("background-color","orange")
a.eq(3).css("background-color","orange")
da.animate({
marginLeft: 0 + "px"
}, 500, function() {})
})
a.eq(1).click(function() {
a.eq(1).css("background-color","blue")
a.eq(0).css("background-color","orange")
a.eq(2).css("background-color","orange")
a.eq(3).css("background-color","orange")
da.animate({
marginLeft: (-620) + "px"
}, 500, function() {})
})
a.eq(2).click(function() {
a.eq(2).css("background-color","blue")
a.eq(0).css("background-color","orange")
a.eq(1).css("background-color","orange")
a.eq(3).css("background-color","orange")
da.animate({
marginLeft: (-1240) + "px"
}, 500, function() {})
})
a.eq(3).click(function() {
a.eq(3).css("background-color","blue")
a.eq(0).css("background-color","orange")
a.eq(2).css("background-color","orange")
a.eq(1).css("background-color","orange")
da.animate({
marginLeft: (-1860) + "px"
}, 500, function() {})
})

转载于:https://www.cnblogs.com/m110/p/7673992.html