无缝滚动图片——源码
生活随笔
收集整理的這篇文章主要介紹了
无缝滚动图片——源码
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
圖片已上傳，請到我的資源部去下載，不用積分，——無縫滾動圖片http://download.csdn.net/detail/qq_34137397/9665933
</head> <body> <div class="control"><label id="chk_pause"><input type="checkbox" checked="checked">間隔停頓</label><select id="pause_time"><option value="100">短</option><option value="1000" selected="selected">中</option><option value="3000">長</option></select>滾動速度：<select id="sel_speed"><option value="2">慢</option><option value="5">中</option><option value="10">快</option></select> </div><div class="roll" id="roll"><a href="javascript:void(0);" class="btn_left"></a><a href="javascript:void(0);" class="btn_right"></a><div class="wrap"><ul><li><a href="http://www.zhinengshe.com/"><img src="images/1.jpg" /></a></li><li><a href="http://www.zhinengshe.com/"><img src="images/2.jpg" /></a></li><li><a href="http://www.zhinengshe.com/"><img src="images/3.jpg" /></a></li><li><a href="http://www.zhinengshe.com/"><img src="images/4.jpg" /></a></li></ul></div> </div> </body> </html>CSS代碼 * { padding: 0; margin: 0; } li { list-style: none; } img { border: 0; }.roll { width: 880px; height: 108px; margin: 50px auto 0; position: relative; } .btn_left { display: block; width: 68px; height: 68px; background: url(images/btn.jpg) no-repeat -70px -69px; position: absolute; top: 20px; left: 1px; z-index: 1; } .btn_left:hover { background: url(images/btn.jpg) no-repeat -70px 0; } .btn_right { display: block; width: 68px; height: 68px; background: url(images/btn.jpg) no-repeat 1px -69px; position: absolute; top: 20px; right: 0; z-index: 1; } .btn_right:hover { background: url(images/btn.jpg) no-repeat 1px 0; } .roll .wrap { width: 728px; height: 108px; margin: 0 auto; position: relative; overflow: hidden; } .roll ul { position: absolute; top: 0; left: 0; } .roll li { float: left; width: 182px; height: 108px; text-align: center; } .roll li a:hover { position: relative; top: 2px; }.control { border-bottom: 1px solid #ccc; background: #eee; text-align: center; padding: 20px 0; }
js代碼 var g_bMoveLeft=true; var g_oTimer=null; var g_oTimerOut=null;var g_bPause=true; var g_iPauseTime=1000; var g_iSpeed=2;window.οnlοad=function () {var oDiv=document.getElementById('roll');var oUl=oDiv.getElementsByTagName('ul')[0];var aLi=oUl.getElementsByTagName('li');var aA=oDiv.getElementsByTagName('a');var oChk=document.getElementById('chk_pause');var oPauseTime=document.getElementById('pause_time');var oSpeed=document.getElementById('sel_speed');var i=0;var str=oUl.innerHTML+oUl.innerHTML;oUl.innerHTML=str;oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';for(i=0;i<aLi.length;i++){aLi[i].οnmοuseοver=function (){stopMove();};aLi[i].οnmοuseοut=function (){startMove(g_bMoveLeft);};}aA[0].οnmοuseοver=function (){startMove(true);};aA[1].οnmοuseοver=function (){startMove(false);};startMove(true);oChk.οnclick=function (){g_bPause=oChk.getElementsByTagName('input')[0].checked;};oSpeed.οnchange=function (){g_iSpeed=parseInt(this.value);};oPauseTime.οnchange=function (){g_iPauseTime=parseInt(this.value);}; };function startMove(bLeft) {g_bMoveLeft=bLeft;if(g_oTimer){clearInterval(g_oTimer);}g_oTimer=setInterval(doMove, 30); }function stopMove() {clearInterval(g_oTimer);g_oTimer=null; }function doMove() {var oDiv=document.getElementById('roll');var oUl=oDiv.getElementsByTagName('ul')[0];var aLi=oUl.getElementsByTagName('li');var l=oUl.offsetLeft;if(g_bMoveLeft){l-=g_iSpeed;if(l<=-oUl.offsetWidth/2){l+=oUl.offsetWidth/2;}}else{l+=g_iSpeed;if(l>=0){l-=oUl.offsetWidth/2;}}if(g_bPause){if(Math.abs(l-Math.round(l/aLi[0].offsetWidth)*aLi[0].offsetWidth)<Math.ceil(g_iSpeed/2)){stopMove();g_oTimerOut=setTimeout(function (){startMove(g_bMoveLeft);}, g_iPauseTime);l=Math.round(l/aLi[0].offsetWidth)*aLi[0].offsetWidth;}}oUl.style.left=l+'px'; }
總結(jié)
以上是生活随笔為你收集整理的无缝滚动图片——源码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《使命召唤：战区》手游将于2024年春季
- 下一篇： Github Pages + Jekyl