美文网首页
轮播图总结

轮播图总结

作者: qzuser_8165 | 来源:发表于2017-10-11 09:02 被阅读0次

    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";

     }

    }
    ***

    相关文章

      网友评论

          本文标题:轮播图总结

          本文链接:https://www.haomeiwen.com/subject/vfcvyxtx.html