js实现无缝循环滚动
生活随笔
收集整理的這篇文章主要介紹了
js实现无缝循环滚动
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>無縫滾動</title>
</head>
<style type="text/css">.row{width: 1298px;height: 400px;border: 1px solid;box-shadow:2px 2px 2px #000;overflow: hidden;}.box{position: relative;}.box1,.box2{width: 1298px;position: absolute;}.box2{left:1298px;}img{float: left;}
</style>
<body><div class="row"><div class="box" id="box"><div class="box1" id="box1"><img src="images/1.jpg"><img src="images/2.jpg"><img src="images/3.jpg"><img src="images/4.jpg"><img src="images/5.jpg"></div><div class="box2" id="box2"><img src="images/1.jpg"><img src="images/2.jpg"><img src="images/3.jpg"><img src="images/4.jpg"><img src="images/5.jpg"></div></div></div>
</body>
<script type="text/javascript">window.onload = function(){var _box1 = document.getElementById("box1");var _box2 = document.getElementById("box2");var x = 0;var fun = function(){_box1.style.left = x + 'px';_box2.style.left = (x +1298) + 'px';x--;if((x +1298) == 0){x = 0;}}setInterval(fun,1);}
</script>
</html>
圖片格式：260*400.
使用循環定時器輕松實現。
轉載于:https://www.cnblogs.com/huangzongyi/p/5799382.html
總結
以上是生活随笔為你收集整理的js实现无缝循环滚动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android进阶篇之引导页系列之Vie
- 下一篇： 微信菜单保存