图片已上传，请到我的资源部去下载，不用积分，——无缝滚动图片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'; }
