JavaScript编写轮播图

最新推荐文章于 2023-10-06 23:43:32 发布

ChericeYang

最新推荐文章于 2023-10-06 23:43:32 发布

阅读量412

点赞数

本文链接：https://blog.csdn.net/cathei/article/details/80999794

版权

这是一个使用HTML、CSS和JavaScript编写的简单轮播图示例。通过设置定时器，每隔2秒，JavaScript会将轮播图内容向左移动500像素，形成连续滚动的效果。当内容移出视窗时，将其位置重置，实现无缝循环播放。

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#wrap{
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
margin: 0 auto;

}
#box{
width: 500%;
height: 100%;
position: absolute;
left: 0;
transition: all 1s linear;
}
#box div {
width: 500px;
height: 300px;
float: left;
background-color: #7A8FD9;
color: white;
font-size: 50px;
line-height: 300px;
text-align: center;
}

</style>
</head>
<body>
<div id="wrap">
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
</body>
<script>
//JS版本轮播图
setInterval(
function(){
//让box向左移动每次移动500px
var l = box.offsetLeft;
l -= 500;
if (l < -1000) {
l = 0 ;
}
box.style.left = l + "px";
},2000)
</script>
</html>