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

最新推荐文章于 2022-09-22 13:09:44 发布

浅色调楪祈

最新推荐文章于 2022-09-22 13:09:44 发布

阅读量453

点赞数

本文链接：https://blog.csdn.net/qq_42018470/article/details/86514845

版权

开发工具与关键技术：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>

然后用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>