您的位置：首页 > Web前端 > JavaScript

js实现无缝轮播图——详细代码

2018-08-16 21:48 375 查看 
[code]<!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>

如果有什么疑问，欢迎提问哦！

阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航