<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无间断大图滚动</title>
<style type="text/css">
#show {
width: 1200px;
height:230px;
border:3px solid gold;
/*overflow:hidden;*/
margin:100px auto;
position: relative;
}
#contentDiv {
/*width: 4800px;*/
height: 230px;
position: absolute;
top: 0;
left: 0;
}
#contentDiv img {
width: 400px;
height: 230px;
float:left;
}
</style>
</head>
<body>
<div id="show">
<div id="contentDiv">
<img src="img/1.jpg" alt="" />
<img src="img/2.jpg" alt="" />
<img src="img/3.jpg" alt="" />
<img src="img/4.jpg" alt="" />
<img src="img/5.jpg" alt="" />
<img src="img/6.jpg" alt="" />
</div>
</div>
<script type="text/javascript">
/*
* 1.在第一组图片的后面再拼接一组图片
* 2.在第一组图片完全移出屏幕时,把整个div拉回来
*/
//声明一个变量存储当前移动的位置
var x = 0;
var contentDiv = document.getElementById("contentDiv");
contentDiv.innerHTML += contentDiv.innerHTML;
var imgs = document.getElementsByTagName("img");
contentDiv.style.width = imgs[0].offsetWidth * imgs.length + "px";
//移动函数
function scroll(){
x--;
contentDiv.style.left = x + "px";
if(x == -2400){
x = 0;
}
}
setInterval(scroll, 5);
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
