javascript -- (无间断滚动图片)

无间断滚动图片 －－原理（定时器 每隔.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>

转载于:https://www.cnblogs.com/zhao12354/p/5800669.html