js实现图片无缝连接
生活随笔
收集整理的這篇文章主要介紹了
js实现图片无缝连接
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
效果圖
?
1.首先先看看html和css代碼
<style>*{padding:0;margin:0;}#div1{margin:100px auto;background:red;width:712px;height:108px;position:relative;overflow:hidden;}#div1 ul{position:absolute;left:0;top:0;}#div1 ul li{list-style:none;float:left;width:178px;height:108px;}#a1{display:block;width:66px;height:66px;background:url(btn.jpg) 66px 68px;position: absolute;left:250px;top:120px; }#a2{display:block;width:66px;height:66px;background:url(btn.jpg) 135px 68px;position: absolute;left:1050px;top:120px; } </style> <body> <a href="javascript:" id="a1"></a> <a href="javascript:" id="a2"></a> <div id="div1"><ul><li><img src="1.jpg" /></li><li><img src="2.jpg" /></li><li><img src="3.jpg" /></li><li><img src="4.jpg" /></li></ul> </div> </body>js代碼如下，都帶有注釋，大家可以自己實(shí)現(xiàn)再看代碼
<script>window.onload=function(){var oDiv =document.getElementById("div1");var oUl =oDiv.getElementsByTagName("ul")[0];var aLi=oUl.getElementsByTagName("li");oUl.innerHTML=oUl.innerHTML+oUl.innerHTML; //增加重復(fù)的四張圖片// console.log(oUl.innerHTML); //調(diào)試用的oUl.style.width=aLi.length * aLi[0].offsetWidth +"px"; //因?yàn)樯厦婕恿艘话氲膱D片，現(xiàn)在有8張圖片。// console.log(aLi.length);var speed=2;function overside(){if (oUl.offsetLeft<-oUl.offsetWidth/2) //當(dāng)ul的一般向左運(yùn)動，當(dāng)ul將要進(jìn)入div時 {oUl.style.left='0';}if(oUl.offsetLeft>0) //當(dāng)ul等于0，即向右運(yùn)動館將要出div的時候 {oUl.style.left=-oUl.offsetWidth/2+'px'; }oUl.style.left=oUl.offsetLeft+speed+'px'; }var timer=setInterval(overside,30 ) ;oDiv.onmouseover=function(){clearInterval(timer);};oDiv.onmouseout=function(){timer=setInterval(overside,30 ) ;}var oA=document.getElementsByTagName("a");oA[0].οnclick=function(){speed=-2;}oA[1].οnclick=function(){speed=2;}}; </script>這有點(diǎn)難度，希望不懂得方法和屬性可以百度
轉(zhuǎn)載于:https://www.cnblogs.com/biyongyao/p/5854799.html
總結(jié)
以上是生活随笔為你收集整理的js实现图片无缝连接的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android学习笔记34——ClipD
- 下一篇： iOS经典面试题总结--内存管理