html5实现无缝滚动的效果
在开发中我们经常会看到这样的应用场景。无缝滚动。就是几张图循环播放。图就不上了 ，不会制作gif。
直接上代码，避免以后重复造车轮。
<html><head><meta charset="UTF-8"><title>走马灯效果title><style type="text/css">* {margin: 0;padding: 0;}#div1 {background: red;width: 1200px;height: 250px;margin: 100px auto;position: relative;overflow: hidden;}#div1 ul {position: absolute;left: 100;top: 0;}#div1 ul li {float: left;list-style: none;width: 300px;height: 250px;}#div1 ul li img {width: 300px;height: 250px;}style><script type="text/javascript">window.onload = function() {var oDiv1 = document.getElementById("div1");var oUl = oDiv1.getElementsByTagName("ul")[0];var aLi = oUl.getElementsByTagName("li");var space = -2;oUl.innerHTML += oUl.innerHTML;oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';function play() {if(oUl.offsetLeft < -oUl.offsetWidth / 2) {oUl.style.left = '0';}if(oUl.offsetLeft > 0) {oUl.style.left = -oUl.offsetWidth / 2 + 'px';space = 2;}oUl.style.left = oUl.offsetLeft + space + 'px';};var timer = setInterval(play, 30);oDiv1.onmouseover = function() {clearInterval(timer);};oDiv1.onmouseout = function() {timer = setInterval(play, 30);};var oLeft = document.getElementsByTagName("a")[0];var oRidht = document.getElementsByTagName("a")[1];oLeft.onclick = function() {space = -2;}oRidht.onclick = function() {space = 2;}};script>head><body><div><a href="javascript:;">向左运动a><a href="javascript:;">向右运动a>div><div id="div1"><ul><li><img src="img/6e6f32045de828a239ea948b261a2783.png" />li><li><img src="img/7d9cabd86d8aa35f87d1630242919699.jpg" />li><li><img src="img/d77d3f09a1cd86ee05f9dc069676494b.jpg" />li><li><img src="img/ed388771ab4a232dbb0a14a8e90d467d.jpg" />li>ul>div>body>html>实现了向左或向右的无缝滚动
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！