html三张图片自动轮回播放,JS -- 记一种用原生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;

}

}

}