本文主要是介绍javascript 书写无缝滚动。，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
废话少说，献上demo 源码 大家自己下载看效果。先放上html代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>无缝滚动</title><link rel="stylesheet" href="static/css/aio.css" />
</head><body><h1>无缝滚动</h1><div class="btn l-btn" id="l-btn"><</div><div class="btn r-btn" id="r-btn">></div><div class="banner" id="banner"><ul class="move" id="move"><li><a href="#"><img src="static/images/1.jpg" alt=""></a></li><li><a href="#"><img src="static/images/2.jpg" alt=""></a></li><li><a href="#"><img src="static/images/3.jpg" alt=""></a></li><li><a href="#"><img src="static/images/4.jpg" alt=""></a></li></ul></div> <script type="text/javascript" src="static/js/test.js"></script>
</body>
</html>接下来就是css文件对页面的格式进行了简单的布局。
/*!/css/demo.scss*/
body{text-align: center;background-color: #FFCCFF;
}
.banner {position: relative;margin: 50px auto 0;width: 800px;height: 120px;border: 2px solid #fff;overflow: hidden;
}.banner .move {position: absolute;
}.banner ul {margin: 0;padding: 0;list-style-type: none;font-size: 0;
}.banner ul li {display: inline-block;
}.btn {margin-top: 40px;width: 30px;height: 100px;background-color: rgba(255, 255, 255, .3);line-height: 100px;text-align: center;font-size: 60px;font-weight: bold;cursor: pointer;
}.l-btn {float: left;
}.r-btn {float: right;
}
接下就是原生的js代码
window.onload =function() {var oDiv = document.getElementById('banner');var oUl = oDiv.getElementsByTagName('ul')[0];var oLi = oUl.getElementsByTagName('li');var speed = -2;oUl.innerHTML+=oUl.innerHTML;oUl.style.width = oLi[0].offsetWidth*oLi.length+'px';function move(){oUl.style.left = oUl.offsetLeft +speed +"px";if(oUl.offsetLeft < -oUl.offsetWidth/2){ //宽度没有负值，但是offsetLeft有，所以（-）不能忘记oUl.style.left = 0;}if(oUl.offsetLeft > 0){oUl.style.left = -oUl.offsetWidth/2 + 'px';}}var time = setInterval(move,30);//鼠标放上去和移出的暂停效果oDiv.onmouseover = function(){clearInterval(time);}oDiv.onmouseout = function(){time = setInterval(move,30);}var lBtn =document.getElementById('l-btn');var rBtn =document.getElementById('r-btn');// 左右控制的效果lBtn.onclick = function(argument) {speed = -2;}rBtn.onclick =function(){speed = 2;}
}
二，我们先申请一个speed变量，因为到后面 我们可以用它来控制速度和滚动的方向。
三，动态多创建一份li元素，这里不好解释，大家可以注释之后看代码。就能明白它的意义了。
四，为了能让oUl的宽度装下所有的oLi,所以用一个oLi的宽度去乘以oLi的length.加上px就可以了（ps:一定要加‘px’,除非宽度是0.因为style.width是个string类型）
五，在move函数里面，主要就是对位置的判断了。大家可以自己去琢磨一下。（代码无缝滚动效果的原理是：改变了div 的left值。）
我自己在写的时候，总是搞不清element.style.left 和element.offsetLeft。如果你也是一样， 请戳这里！
这篇关于javascript 书写无缝滚动。的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
