js之轮播图的逻辑(简单)

样式前面有，不写了

利用for循环写轮播图逻辑

1.先找到写逻辑的ul的id

<script>
//假如id叫nav
var nav=document.getElementById("nav")
</script>

2.找到id为nav里的li标签 找到标签的逻辑：document.getElementsByTagName()

<script>
//因为是nav里的li标签
var lis=nav.getElementsByTagName("li")
//会议数组的形式在控制台输出
</script>

3.利用for循环遍历数组，for循环里写时间（当鼠标进入时，背景颜色为白色）

this对象：永远指向发生事件的元素就是本次事件的事件源

<script>
for(var n=0;n<lis.length;n++){
    lis[n].onmouseenter=function(){
    this.className="active"
//给第一个li的id名为active，所有的li的名都为active
}
</script>

4.当鼠标进入时，清除其他li的样式：排他法。用for循环

<script>
    for(var i=0;i<lis.length;i++){
    lis[i].className=""
}
</script>

5.图片移动：分发对应索引值。图片的样式为：向左移动他的宽度

<script>
    var img=document.getElementById("img")
    lis[n].index=n
    img.style.marginLeft=宽度*this.index+"px"
</script>

所有的代码

<script>
        var nav=document.getElementById("nav")
        var lis=nav.getElementsByTagName("li")
        var img=document.getElementById("img")
        for(var n=0;n<lis.length;n++){
            lis[n].index=n
          lis[n].onmouseenter=function(){
              for(var i=0;i<lis.length;i++){
                  lis[i].className=""
              }
                this.className="active"
                img.style.marginLeft=-550*this.index+"px"
            }
        }
</script>