2015.7.11js-10(无缝滚动)
生活随笔
收集整理的這篇文章主要介紹了
2015.7.11js-10(无缝滚动)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1.實現(xiàn)原理：setInterval定時器，讓某元素position的left屬性定時滾動，使用到js中的元素的offsetLeft屬性。
2.案例：1.css的實現(xiàn)是外div是4張圖片的總寬度，設置relative然后overflow隱藏。子代有ul層設置為absolute;left屬性移動時都是移動整個ul層的。;
? ? ? ? ? ?2.4張圖片無縫滾動，再復制4張（1，2，3，4）在第4張后面，li下有4張圖片，獲取li的offsetWidth(),然后算出ul的總寬度，當包著4張圖片的ul層的offsetLeft滾動到一半的時候，將前4張的left變成0，這樣滾動的時候就會無縫滾動了。設置ul層的offsetLeft來控制滾動。
? 3.demo地址：http://www.alanjs.comeze.com/study/demo11setInterval.html
<script type="text/javascript"> window.onload = function(){var slide = document.getElementById("slideImg");var moveUl = document.getElementById("moveUl");var aLi = slide.getElementsByTagName("li");var timer = null;var speed = -2;var prev = document.getElementById("prev");var next = document.getElementById("next");moveUl.innerHTML = moveUl.innerHTML + moveUl.innerHTML; //先復制4張圖片放在后面 moveUl.style.width = aLi[0].offsetWidth*aLi.length + "px"; //獲取一個li的寬度來設置ul層的總寬度 timer = setInterval(move,30)slide.onmouseover = function(){if(timer){clearInterval(timer);}}slide.onmouseout = function(){timer = setInterval(move,30);}prev.onclick = function(){speed = -2;}next .onclick = function(){speed = 2;}function move(){if(moveUl.offsetLeft < -moveUl.offsetWidth/2){ //向左滾動,當滾動到一半的時候，前面4張就跳到后面 moveUl.style.left = "0";}if(moveUl.offsetLeft > 0){moveUl.style.left = -moveUl.offsetWidth/2 + "px"; //向右滾動,當一開始滾動的時候，ul的left屬性大于0，后面4張就立即跳到前面 }moveUl.style.left = moveUl.offsetLeft+speed + "px"; //設置ul層的offsetLeft來控制滾動
}
}
</script> <style> #wrap{width:1603px;margin:0 auto;height:300px;} #sliderImg{width:1308px;height:203px;position:relative;overflow:hidden;border:1px solid red;} #sliderImg ul{positin:absolute;left:0px;top:0px;} #sliderImg ul li{list-style:none;float:left} </style><body><div id="wrap"><div id="sliderImg"><ul id="moveUl"><li><a href="javascript:;"><img src="images/slide5.jpg" /></a></li><li><a href="javascript:;"><img src="images/slide6.jpg" /></a></li><li><a href="javascript:;"><img src="images/slide7.jpg" /></a></li><li><a href="javascript:;"><img src="images/slide8.jpg" /></a></li></ul></div><a id="prev" href="javascript:;">prev</a><a id="next" href="javascript:;">next</a></div> </body>
轉載于:https://www.cnblogs.com/alantao/p/4639151.html
總結
以上是生活随笔為你收集整理的2015.7.11js-10(无缝滚动)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 轶事奇语
- 下一篇： 莫队算法 BOJ 2038 [2009国