轮播图

Posted 2020-07-31 前端小超人

使用什么元素获取什么元素

var banner = document.getElementById("banner");
var tip = document.getElementById("tip");
var oDivs = banner.getElementsByTagName("div");
var oLis = tip.getElementsByTagName("li");
//鼠标滑过某一个li,我们让所有的li和所有的div都没有选中的样式(select),然后让当前选中的这个li和对应的div有选中的样式
function changeTab(nIndex) {
    for (var i = 0; i < oLis.length; i++) {
        oLis[i].className = null;
        oDivs[i].className = null;
    }
    oLis[nIndex].className = "select";
    oDivs[nIndex].className = "select";
}

//自定义属性处理问题是JS中最常用的编程思想
for (var i = 0; i < oLis.length; i++) {
    oLis[i].index = i;//每一次循环把当前li的索引存储到自己的自定义属性index上,后期需要用到索引的时候我们只需要把自定义属性index的值获取到拿来用即可
    oLis[i].onmouseover = function () {
        //this->当前鼠标滑过的这个li
        changeTab(this.index);
    };
}