怎样用JavaScript实现图片的滚动效果？

希望说基础方法，没基础。... 希望说基础方法，没基础。展开

 我来答

2个回答

#合辑# 机票是越早买越便宜吗？

百度网友8dce392c02
2012-03-13 · TA获得超过1099个赞

知道小有建树答主

回答量：587

采纳率：66%

帮助的人：307万

我也去答题访问个人页

关注

展开全部

直接给你一段简单的代码，不懂再问
<html>
<head>
<title>图片滚动 </title>
 <style>
  #div1  
{position:relative;width:650px;height:210px;overflow:hidden; 
}
  #div2{position:absolute;}
  li{float:left;list-style-type:none;padding:5px;}
  img{border:none;}
  #div2 li a:hover{top:-10px;}
  a{position:relative;}
  </style>
 <script>
  window.onload=function()
  {
   var odiv2=document.getElementById('div2');
   var ali=odiv2.getElementsByTagName('li');
   var aspeed=-5;
   var timer=null;
   odiv2.innerHTML+=odiv2.innerHTML;
   odiv2.style.width=ali[0].offsetWidth*ali.length+'px';
odiv2.onmouseover=function(){clearInterval(timer);};
function a()
{
   timer=setInterval(function()    
     {
      odiv2.style.left=odiv2.offsetLeft+aspeed+'px';
      if (odiv2.offsetLeft<-odiv2.offsetWidth/2)
      {
       odiv2.style.left='0px';
       }
       },30);};
   odiv2.onmouseout=a;
   a();
   }
 </script>
</head>
<body>
 <div id='div1'>
  <div id='div2'>
   <li><a href=""><img src="1.jpg" /></a></li>
   <li><a href=""><img src="2.jpg" /></a></li>
   <li><a href=""><img src="3.jpg" /></a></li>
   <li><a href=""><img src="4.jpg" /></a></li>   
  </div>
 </div>
</body>
</html>


本回答被提问者和网友采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起