<html> <body>
- <a href="Underswap"><img src=""/></a>
- <a href="Underfell"><img src=""/></a>
- <a href="Storyshift"><img src=""/></a>
- <a href="Facing_Demons"><img style="width:100%;" src=""/></a>
- <a href="HELP_tale"><img src=""/></a>
- <a href="Empiretale"><img style="width:85%;"src=""/></a>
- <a href="OMORITALE"><img src=""/></a>
<
</button> <button class="btn" id="rightBtn">>
</button><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>