求助大神 ;无缝滚动时 向右方向没有进行无缝

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

  <!-- 全局声明-->

  *{ margin:0 auto; padding:0;}

  li{ list-style:none;}

  img{ border:0;}

  

  .btn_left{ width:78px; height:78px; background:url(images/btn.jpg) -68px -68px no-repeat; display:block; position:absolute; top:75px; left:20px; z-index:1;}

  .btn_right{ width:78px; height:78px ; background:url(images/btn.jpg) 8px -68px no-repeat ; display:block; position:absolute; top:75px; right:20px; z-index:1;}

  .btn_left:hover{ background:url(images/btn.jpg) -68px 8px no-repeat ;}

  .btn_right:hover{  background:url(images/btn.jpg) 8px 8px no-repeat ;  }

   

  .sroll{ height:250px; border:1px solid rgb(204,204,204); width:1340px; position:relative;}

  .wrap{ width:1120px; height:200px; position:relative; overflow:hidden;  background:#eee; margin:0 auto;  z-index:0; padding-right:35px; border:2px solid #000; margin-top:20px; }

  .wrap ul{ position:absolute; left:0px;} 

  .wrap ul li{ float:left; text-align:center; padding-bottom:5px;}

  .wrap ul li img{ width:250px; margin: 0 5px; padding:5px; background:rgb(153,153,153);}

  .wrap ul li img:hover{ background:rgb(0,102,102);}

  

  

</style>

   <script>

     window.onload = function(){

 

var oDiv = document.getElementById("sroll");

var oUl = oDiv.getElementsByTagName('ul')[0];

var aLi = oDiv.getElementsByTagName('li');

var aBtn = oDiv.getElementsByTagName('a');

var iSpeed=-3;

var timer='null'

oUl.innerHTML +=oUl.innerHTML;

oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';  

   timer=setInterval(function (){

 

oUl.style.left=oUl.offsetLeft+iSpeed+"px";

if(oUl.offsetLeft<-oUl.offsetWidth/2){

oUl.style.left='-20px';

 }

else if(oUl.offsetLeft=='-50px'){

oUl.style.left= -oUl.offsetWidth/2;

}

   

}, 30 );

aBtn[0].onclick = function(){

iSpeed=-3;

}

   aBtn[1].onclick = function(){

 

iSpeed=3;

}

oUl.onmouseover = function(){

clearInterval(timer);

}

 oUl.onmouseout = function(){

   timer=setInterval(function (){

 

oUl.style.left=oUl.offsetLeft+iSpeed+"px";

if(oUl.offsetLeft<-oUl.offsetWidth/2){

oUl.style.left='-20px';

 }

else if(oUl.offsetLeft>0){

oUl.style.left = oUl.offsetWidth/2;

}

     

   

}, 30 );

aBtn[0].onclick = function(){

iSpeed=-3;

}

   aBtn[1].onclick = function(){

 

iSpeed=3;

}

}

}

        

   </script>

  

  

  

</head>


<body>

 <div id="sroll" class="sroll">

     <a href="javascript:;" class="btn_left"></a>

     <a href="javascript:;" class="btn_right"></a>

     <div class="wrap">

         <ul>

             <li><a href="#" target="_blank" alt='ds' title="das"><img src="images/1.jpg" /></a></li>

             <li><a href="#" target="_blank" alt='ds' title="das"><img src="images/2.jpg" /></a></li>

             <li><a href="#" target="_blank" alt='ds' title="das"><img src="images/3.jpg" /></a></li>

             <li><a href="#" target="_blank" alt='ds' title="das"><img src="images/4.jpg" /></a></li>

             <li><a href="#" target="_blank" alt='ds' title="das"><img src="images/5.gif" /></a></li>

         </ul>    

     </div>

 </div>


</body>

</html>


颜色不一样的我
浏览 1467回答 1
1回答
打开App,查看更多内容
随时随地看视频慕课网APP