JavaScript 实现动画轮播图

最新推荐文章于 2022-10-13 22:55:51 发布

HCahao

最新推荐文章于 2022-10-13 22:55:51 发布

阅读量277

点赞数

分类专栏： Web前端文章标签： servlet html 前端

本文链接：https://blog.csdn.net/HCahao/article/details/126444291

版权

Web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这是一个实现无缝轮播图的HTML页面示例，通过JavaScript控制图片的滑动，每3秒自动切换。当浏览器窗口失去焦点时，轮播会暂停，重新获得焦点时恢复播放。主要涉及CSS定位、JavaScript计时器和事件监听。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>

<head>

<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>

//自执行

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>

HCahao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 实现动画轮播图

JavaScript 实现基础动画轮播图
复制链接

扫一扫

专栏目录