这是一个实现无缝轮播图的HTML页面示例，通过JavaScript控制图片的滑动，每3秒自动切换。当浏览器窗口失去焦点时，轮播会暂停，重新获得焦点时恢复播放。主要涉及CSS定位、JavaScript计时器和事件监听。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0; padding: 0; box-sizing: border-box;
}
#box{
width: 1000px;
height: 300px;
border: 1px solid red;
position: relative;
margin: auto;
overflow: hidden;
}
#box img{
width: 1200px;
height: 300px;
position: absolute;
left: 1000px;
}
#box img:nth-child(1){
left: 0;
}
</style>
</head>
<body>
<div id="box">
<img src="../images/a (1).png" alt="">
<img src="../images/a (2).png" alt="">
<img src="../images/a (3).png" alt="">
<img src="../images/a (4).png" alt="">
</div>
<script>
//自执行
window.onload = function(){
//定义索引
var _currIndex =0; //当前索引
var _nextIndex =1 //下一张准备进入的索引
//获取所有的img
var _imgs=document.querySelectorAll("img")
console.log(_imgs)
//计时函数 3000
var bannerTimer = setInterval(play,3000)
function play(){
//当前图片的位置
_currLeft =0;
//下一张图片的位置
_nextLeft =1000;
var timer = setInterval(function(){
_currLeft -=20;
if(_currLeft<-1000){
clearTimeout(timer);
_currIndex++;
if(_currIndex>_imgs.length){
_currIndex=0
}
}else{
_imgs[_currIndex].style.left=_currLeft+"px"
}
//下一章区域
_nextLeft -=20;
if(_nextIndex<0){
clearInterval(timer);
_nextIndex++;
if(_nextIndex>_imgs.length){
_nextIndex=0
}
}else{
_imgs[_nextIndex].style.left=_nextLeft+"px"
}
})
}
//浏览器关闭清除计时效果
document.addEventListener("visibilitychange",function(){
//获取当前状态
var hidder = document.hidden;
if(hidder){
clearInterval(bannerTimer)
}else{
bannerTimer = setInterval(play,3000)
}
})
}
</script>
</body>
</html>
扫一扫
1015
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
