【js特效】图片循环滚动代码「建议收藏」

1.效果图如下：

2.html代码：

3.css代码：

* { padding: 0; margin: 0; }
li { list-style: none; }
img { border: 0; }
.roll { width: 698px; 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: 546px; 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; display: none; }

4.js代码：

var g_bMoveLeft=true;
var g_oTimer=null;
var g_oTimerOut=null;
var g_iSpeed=3;
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 i=0;
  var str=oUl.innerHTML+oUl.innerHTML;//两组
  • 元素
    oUl.innerHTML=str;
    oUl.style.px';//两组
  • 标签的总宽度
for(i=0;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);
};
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;
}
}
oUl.style.left=l+'px';
}