<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.block{
width: 1000px;
height: 200px;
border:1px solid silver;
overflow: hidden;
overflow-x: scroll;
}
.bp{
width: 4800px;
height: 200px;
}
.b1 ,.b2{
width: 2400px;
height: 200px;
float: left;
}
.b1>img{
width: 400px;
height: 200px;
float: left;
}
.b2>img{
width: 400px;
height: 200px;
float: left;
}
</style>
</head>
<body>
<div class="block">
<div class="bp">
<div class="b1">
<img src="./img/demo1.jpg"/>
<img src="./img/demo2.jpg"/>
<img src="./img/demo3.jpg"/>
<img src="./img/demo4.jpg"/>
<img src="./img/demo5.jpg"/>
<img src="./img/demo6.jpg"/>
</div>
<div class="b2"></div>
</div>
</div>
<script>
var block=document.getElementsByClassName("block")[0];
var b1=document.getElementsByClassName("b1")[0];
var b2=document.getElementsByClassName("b2")[0];
b2.innerHTML=b1.innerHTML;//补充空白区
var speed=2;
setInterval(function() {//由于默认block.scrollLeft等于0；block.scrollLeft--无法运动，故当图距离左侧小于等于0时，令block=2400;
if (block.scrollLeft <= 0) {
block.scrollLeft = 2400;
}
block.scrollLeft-=speed;
},10)
</script>
</body>
</html>如果有什么疑问，欢迎提问哦！
275
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
