轮播图总结

2017-10-11  本文已影响0人  qzuser_8165

classname方法:css,html部分ul包裹5个li超出部分隐藏。2个div作为按钮定位上去。给第一张图片添加一个有display:block的属性名,然后给其他图片添加display:none的属性名。var一个全局信号量初始值0; 鼠标点击事件的时候++或者--,然后加上判断<0的时候信号量为4,>4的时候信号量为0,然后遍历所有的图片下标为[i],鼠标点击的时候让下标[i]的所有图片的classname名空。然后把下标为信号量的classname修改为有display:block的属性名;

***
var leftbtn = document.getElementsByTagName("div")[0];

var rightbtn = document.getElementsByTagName("div")[1];

var img = document.getElementById("tu").getElementsByTagName("li");
var index = 0 ;

leftbtn.onclick = function(){

index--;

if(index<0){

index=4;

}
for(var i = 0 ; i<img.length; i++){
    img[i].className=" ";

   img[index].className="xianshi";

   }

}
rightbtn.onclick = function(){

index++;

if(index>4){

index=0;

}

for(var i = 0 ; i<img.length ;i++){

img[i].className=" ";
img[index].className="xianshi";

 }

}
***

上一篇下一篇

猜你喜欢

热点阅读