javascript實現可改變滾動方向的無縫滾動實例_javascript技巧

代碼：

複製代碼代碼如下：

U🎜>




>


*{ 邊距：0;填充：0;}
#imgMove{ 高度：205px;寬度：624px；邊框： #000 1px 實心；職位：親屬；邊距：200px auto;溢出：隱藏;}
#imgMove ul{ height:205px;position:absolute;左：0；溢出：隱藏；}
#imgMove li { list-style:none;浮動：左；高度：205px；寬度：156px；邊距：0;}
a img,img{ border:none;}
span{ z-index:999;height :68px;寬度：68px；顯示：無；位置：絕對；遊標:指針;}
#moveLeft{左:0;頂部：68px; }
#moveRight{右:-10px;頂部：68px;頂部：68px; }


window.onload=function(){
var oDiv=document.getElementById('imgMove');
var oUl=oDiv.getElementsByTagName('ul')[0];
var oli=oUl.getElementsByTagName('li');
var liSpeed=1;
var ospan=oDiv.getElementsByTagName('span ');
var rightmove=document.getElementById('moveRight');
var leftmove=document.getElementById('moveLeft');
function show(){
ospan[0].style .display="block";
ospan[1].style.display="block";
}
oUl.onmouseover=function (){
show();
}
oUl.onmouseout=function(){
ospan[0].style.display="none";
ospan[1].style.display="none";
}
ospan [0].onmouseover=function(){
liSpeed=1;
show();/*加這個函數是為了取出向左向右的圖片閃爍*/
}
ospan [1].onmouseover=function(){
liSpeed=-1 ;
show();/*加這個函數是為了取出向左向右的圖片閃爍*/
}

oUl.style.width=oli[0].offsetWidth*oli.長度'px';;
setInterval(function(){
oUl.style.left=oUl.offsetLeft-liSpeed 'px' ;
if(oUl.offsetLeftoUl.style .left=0;
}
else if(oUl.offsetLeft>0)
{
oUl.style.left=-oUl.offsetWidth/2
} },30)
}
腳本>
頭>

• 


• 


• 


• 


• 


• 


• 


• 
  

身體>