html三张图片自动轮回播放,JS
完成一个非无穷轮回不自动切换的轮播图
只需要几张图片和两个按钮(简化)
HTML部份
两个按钮，几张图片(假如有四张图)
右边按钮
左边按钮
CSS部份
动态增加删除li的class属性(native)
span{ cursor: pointer; }
#s1,#s2{
position: absolute;
top: 130px;
}
#s1{ right: 0;}
#s2{ left:0; }
ul{
width: 460px;
height: 280px;
margin: auto;
overflow: hidden;
}
li{
float: left;
display: none;
background-color: orange;
}
.active{
background-color: #dddddd;
display: block;
}
JS部份
window.οnlοad=function(){
var index = 0,
imgs = document.getElementsByTagName("li");
s1.onclick = function(e){
index++;
if(index >= imgs.length){
imgs[imgs.length-1].setAttribute("class", "active");
alert("已经是末了一张图")
return index = imgs.length-1;;
}else{
imgs[index-1].removeAttribute("class");
imgs[index].setAttribute("class", "active");
return index;
}
}
s2.οnclick=function(){
if(index>0){
imgs[index].removeAttribute("class");
imgs[index-1].setAttribute("class", "active");
index--;
return index-1;
}else{
imgs[0].setAttribute("class", "active");
alert("这是第一张图")
return index = 0;
}
}
}