用JS实现简易的Tab选项卡轮播

开发工具与关键技术：Visual Studio 2015
作者：林诗雄
撰写时间：2019年1月16日

首先我这里用的是ul li标签装的图片由于是没有什么好看的图片我就用了颜色来代替
HTML代码如下

<div class="box">
        <div class="lunbo">
            <ul id="lunbo">
                <li class="san"><a href="#" style="background:red;"><img src="" /></a></li>
                <li class="san" style="display:none;background:orange"><a href="#"><img src="" /></a></li>
                <li class="san" style="display:none;background:yellow"><a href="#"><img src="" /></a></li>
                <li class="san" style="display:none;background:green"><a href="#"><img src="" /></a></li>
                <li class="san" style="display:none;background:cyan"><a href="#"><img src="" /></a></li>
                <li class="san" style="display:none;background:blue"><a href="#"><img src="" /></a></li>
                <li class="san" style="display:none;background:purple"><a href="#"><img src="" /></a></li>
            </ul>
        </div>
        <div class="buttons">
            <div style="width:400px;margin:auto;" id="buttons">
                <a href="#" class="on2"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
            </div>
        </div>
    </div>

CSS样式如下

<style>
*{
    padding:0;
    margin:0;
}
li{
    list-style:none;
}
.box{
    width:100%;
}
.lunbo{
    width:1029px;
    height:255px;
    margin:auto;
    position:relative;
    margin-top:10px;
}
.lunbo ul li{
    width:1029px;
    height:255px;
    position:absolute;
    top:0px;
}
.lunbo ul li a{
    display:inline-block;
    width:1029px;
    height:255px;
}
/*.lunbo ul li a img{
    width:1029px;
    height:255px;
}*/
.buttons{
    float:left;
    width:100%;
    height:31px;
    margin:auto;
}
.buttons div a{
    display:inline-block;
    width:48px;
    height:4px;
    background:#434343;
    margin-right:5px;
    border-radius:2px;
}
.buttons div a.on2{
    background:#cdcdcd;
}
.san{
	animation-name: san;
	animation-duration: 0.5s;
}
@keyframes san{
	from{
		opacity: 0
	}
	to{
		opacity: 1
	}
}
</style>

然后用index记录轮播的频数

var index = 0;
function autoPlay() {
            var lunbo = document.getElementById("lunbo").getElementsByTagName("li");
            index++;
            if(index>=lunbo.length){
                index = 0;

            }
            seton2(index);
        }

之后获取到HTML里面设置的ID首先设置按钮的高亮与Tab简易轮播

function seton2(curIndex) {
            var buttons = document.getElementById("buttons").getElementsByTagName("a");
            var lunbo = document.getElementById("lunbo").getElementsByTagName("li");
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].className = "";
                lunbo[i].style.display = "none";
            }
            buttons[curIndex].className = "on2";
            lunbo[curIndex].style.display = "block";
            index = curIndex;
        }

然后调用一下函数就可以了并设置一下定时器每4秒跳动一次

window.onload = function () {
            var buttons = document.getElementById("buttons").getElementsByTagName("a");
            var lunbo = document.getElementById("lunbo").getElementsByTagName("li");
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].id = i;
                buttons[i].onclick = function () {
                    seton2(this.id);
                }
                buttons[i].onmouseover = function () {
                    clearInterval(timer);
                }
                buttons[i].onmouseout = function () {
                    timer = setInterval(autoPlay, 4000)
                }
            }
            timer = setInterval(autoPlay, 4000);

        };

整个JS代码如下

<script>
        var index = 0;
        var timer = null;
        window.onload = function () {
            var buttons = document.getElementById("buttons").getElementsByTagName("a");
            var lunbo = document.getElementById("lunbo").getElementsByTagName("li");
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].id = i;
                buttons[i].onclick = function () {
                    seton2(this.id);
                }
                buttons[i].onmouseover = function () {
                    clearInterval(timer);
                }
                buttons[i].onmouseout = function () {
                    timer = setInterval(autoPlay, 4000)
                }
            }
            timer = setInterval(autoPlay, 4000);

        };
        function autoPlay() {
            var lunbo = document.getElementById("lunbo").getElementsByTagName("li");
            index++;
            if(index>=lunbo.length){
                index = 0;

            }
            seton2(index);
        }
        function seton2(curIndex) {
            var buttons = document.getElementById("buttons").getElementsByTagName("a");
            var lunbo = document.getElementById("lunbo").getElementsByTagName("li");
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].className = "";
                lunbo[i].style.display = "none";
            }
            buttons[curIndex].className = "on2";
            lunbo[curIndex].style.display = "block";
            index = curIndex;
        }

    </script>