无间断滚动图片 --原理(定时器 每隔.1秒调用一次滚动的函数)
/***body**/
<div id="wrap">
<div id="box">
<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>
/***body部分结束**/
/***style样式**/
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 800px;
height: 300px;
border: 1px solid gray;
margin: auto;
overflow: hidden;
position: relative;
margin-top: 150px;
}
#box {
height: 300px;
width: 9999999px;
position: absolute;
}
#box >img {
height: 300px;
width: 200px;
float: left;
}
</style>
/***style部分结束**/
/***script**/
<script type="text/javascript">
/***获取box标签**/
var box = document.getElementById('box');
/***获取所有的img标签**/
var img = document.querySelectorAll('#box img');
/***定义变量接收img的总宽度**/
var imgCountWidth = img.length * 200;
/***定义变量记录x轴的位置**/
var x = 0;
/***复制box标签**/
box.innerHTML += box.innerHTML;
/***定义函数处理滚动**/
function scroll() {
x--;
if(x== -imgCountWidth) {
x = 0;
}
box.style.left = x + 'px';
}
/***定时器调用**/
setInterval(scroll,1);
</script>