查看“模板:轮播图”的源代码

<templatestyles src="模板:轮播图/style.css" />
<html>
<body>
<div class="nomobile">
    <div align="center" >
    <div class="wrap">
        <ul class="list">
<li class="item active">
<a href="Underswap"><img src="https://s4.ax1x.com/2022/02/27/bmD5vj.png"/></a></li>

<li class="item">
<a href="Underfell"><img src="https://s4.ax1x.com/2022/02/27/bmZl4g.png"/></a></li>

<li class="item">
<a href="Storyshift"><img src="https://s4.ax1x.com/2022/02/27/bmrAPO.png"/></a></li>

<li class="item">
<a href="Facing_Demons"><img style="width:100%;" src="https://utcwiki.com/images/0/0a/FD.png"/></a></li>

<li class="item">
<a href="HELP_tale"><img src="https://s4.ax1x.com/2022/02/27/bmrDiT.png"/></a></li>

<li class="item">
<a href="Empiretale"><img style="width:85%;"src="https://utcwiki.com/images/2/2c/Empiretale_logo.png"/></a></li>

<li class="item">
<a href="OMORITALE"><img src="https://utcwiki.com/images/0/0e/Omoritale.png"/></a></li>

        </ul>
        <ul class="pointList">
            <li class="point active" data-index = 0></li>
            <li class="point" data-index = 1></li>
            <li class="point" data-index = 2></li>
            <li class="point" data-index = 3></li>
            <li class="point" data-index = 4></li>
            <li class="point" data-index = 5></li>
            <li class="point" data-index = 6></li>
        </ul>
        <button class="btn" id="leftBtn"> <p style="font-size:150%;"><</p> </button> 
        <button class="btn" id="rightBtn"> <p style="font-size:150%;">></p> </button>
 
    </div></div></div>
    <script>
        var items = document.querySelectorAll(".item");//图片
        var points = document.querySelectorAll(".point")//点
        var left = document.getElementById("leftBtn");
        var right = document.getElementById("rightBtn");
        var all = document.querySelector(".wrap")
        var index = 0;
        var time = 0;//定时器跳转参数初始化
        
 
        //清除active方法
        var clearActive = function () {
            for (i = 0; i < items.length; i++) {
                items[i].className = 'item';
            }
            for (j = 0; j < points.length; j++) {
                points[j].className = 'point';
            }
        }
 
        //改变active方法
        var goIndex = function () {
            clearActive();
            items[index].className = 'item active';
            points[index].className = 'point active'
        }
        //左按钮事件
        var goLeft = function () {
            if (index == 0) {
                index = 6;
            } else {
                index--;
            }
            goIndex();
        }
 
        //右按钮事件
        var goRight = function () {
            if (index < 6) {
                index++;
            } else {
                index = 0;
            }
            goIndex();
        }
        
 
        //绑定点击事件监听
        left.addEventListener('click', function () {
            goLeft();
            time = 0;//计时器跳转清零
        })
 
        right.addEventListener('click', function () {
            goRight();
            time = 0;//计时器跳转清零
        })
 
        for(i = 0;i < points.length;i++){
            points[i].addEventListener('click',function(){
                var pointIndex = this.getAttribute('data-index')
                index = pointIndex;
                goIndex();
                time = 0;//计时器跳转清零
            })
        }
        //计时器
        var timer;
        function play(){
         timer = setInterval(() => {
            time ++;
            if(time == 30 ){
                goRight();
                time = 0;
            }    
        },100)
    }
        play();
        //移入清除计时器
        all.onmousemove = function(){
            clearInterval(timer)
        }
       //移出启动计时器
        all.onmouseleave = function(){
            play();
        }
    </script>
</body>
 
</html>