图片横向滚动效果

• 
• 
• 
• 
• 

 

<div id="imageShow">
  <div id="image">
    <ul>
      <li><a href="#"><img src="" alt="" /></a></li>
      <li><a href="#"><img src="" alt="" /></a></li>
      <li><a href="#"><img src="" alt="" /></a></li>
      <li><a href="#"><img src="" alt="" /></a></li>
      <li><a href="#"><img src="" alt="" /></a></li>
    </ul>
  </div>
  <div id="image_reply"></div>
</div>

 

#imageShow{
    width:640px;
    height:160px;
    margin:30px auto;
    overflow:hidden;
    white-space:nowrap;
    }
#imageShow ul,#imageShow li{
    list-style:none;
    }
#imageShow img{
    width:150px;
    height:150px;
    }
#image,#image_reply,#image ul,#image_reply ul,
#image ul li,#image_reply ul li{display:inline;}

 

var imageShow = document.getElementById("imageShow");
var image = document.getElementById("image");
var image_reply = document.getElementById("image_reply");
var speed = 10;
image_reply.innerHTML = image.innerHTML;
function Marquee(){
  if(image_reply.offsetWidth-imageShow.scrollLeft<=0){
    imageShow.scrollLeft-=image.offsetWidth;
  }
  else{
    imageShow.scrollLeft++;
  }
}
var doMarquee=setInterval(Marquee,speed);
imageShow.onmouseover=function() {clearInterval(doMarquee);}
imageShow.onmouseout=function() {doMarquee=setInterval(Marquee,speed);}

 

 

 

 

来源：https://www.cnblogs.com/lz91/archive/2010/04/11/1709635.html