JavaScript 22 无间断滚动

最新推荐文章于 2021-07-15 10:21:02 发布

zhiying_08

最新推荐文章于 2021-07-15 10:21:02 发布

阅读量193

点赞数

本文链接：https://blog.csdn.net/zhiying_08/article/details/78637605

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box{
width: 500px;
height: 300px;
margin: 0 auto;
overflow: hidden;
border: 4px solid lawngreen;
}
.container{
width: 10000px;
height: 300px;
position: relative;
}
.container>img{
width: 500px;
height: 300px;
float: left;
}
</style>
</head>
<body>


<div class="box">

<div class="container">
<img src="img/4.jpeg" alt="" />
<img src="img/5.jpeg" alt="" />
<img src="img/3.jpeg" alt="" />
<img src="img/4.jpeg" alt="" />
</div>
</div>
<script type="text/javascript">
/*实现无限滚动
* 显示区域(超出隐藏) 内容区域(足够存放内容)
*
* 让内容区域滚动
* 无限滚动:复制内容区域的内容;当第一遍内容滚动结束后,重置水平偏移的位置;
* 为了避免最后一张后有空白,将第一张在内容区域最后再添加第一张内容
*/
var conDiv=document.getElementsByClassName("container")[0];
//复制内容区域的内容
// conDiv.innerHTML+=conDiv.innerHTML;
var i=0;
function scroll(){
i+=10;
if(i>=1500){
i=0
}
conDiv.style.left=-i+"px";
}
setInterval(scroll,100)
</script>

</body>
</html>