简单轮播框

github地址：https://github.com/ziyekkk/carousel

首先轮播框的html与css要点有3：

1.主div属性position：relative

2.图片放在ul里，序号放在ul里

3.图片隐藏

其他细节不表，下面说一下js的主要思路。

首先要想到的是，鼠标指向序号时序号要显示不同颜色，而其他的序号要变为相同颜色，对应的图片要显示，而其他图片要消失。

    var car1=document.getElementById("imageul");//获得图片ul
    var car2=document.getElementById("car1");//获得序号ul
    var imageChild=car1.getElementsByTagName("li");//获得序号下li
    var numChild=car2.getElementsByTagName("li");//获得图片ul下li
    var L=numChild.length;
    numChild[0].style.backgroundColor="red"; 
    imageChild[0].getElementsByTagName("img")[0].style.display="block";//设置初始轮播序号
     
    for(var i=0;i<L;i++){//为每个序号设置鼠标指向事件   
        setMouseActions(numChild[i],imageChild[i],i);
    }
    
    function setMouseActions(node,imgnode,i){
        node.onmouseover=function(){//鼠标指向事件for(var m=0;m<L;m++){//首先设置所有的图片为消失，序号背景为白色（根据需要）
                numChild[m].style.backgroundColor="white";
                imageChild[m].getElementsByTagName("img")[0].style.display="none";
            }
            this.style.backgroundColor="red";//重新设置鼠标指向的目标
            imgnode.getElementsByTagName("img")[0].style.display="block";
        }
    }

接下来想到的是，当无鼠标事件时，轮播框应该自动的轮播，利用setInterval()函数实现，改变内容与上文类似。

但是如此可能出现这种情况，当鼠标指向1时，但是自动轮播到3，下一个本应是2却轮播到4，这时不妨设置一个全局变量G=0，当上文中设置鼠标事件时，让G与当前序号i相等，然后自动轮播如下：

    var interval=self.setInterval(change,1500);//1.5秒执行一次change（）轮播事件
    function change(){

        if(G<L){//当当前序号G小于总序号数时
            
            for(var m=0;m<L;m++){//改变轮播内容
                numChild[m].style.backgroundColor="white";
                imageChild[m].getElementsByTagName("img")[0].style.display="none";
            }
            numChild[G].style.backgroundColor="red";
            imageChild[G].getElementsByTagName("img")[0].style.display="block";
            G++;//下一次轮播
        }else{
            G=0;
        }
        
    }

此时基本完成轮播效果。

但是此时有一种疑问，每次需要轮换时，需要设置项目数*2数目的属性，这种方式是否影响前端页面的优化,还有待商榷。在后面的学习中会持续关注。

 

转载于:https://www.cnblogs.com/wukall/p/5751425.html