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