这样的图片滚动效果怎么做啊 ?

就是按左边就让它在左边转动,按右边就让它在右边转动.<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#slideshow{width:100px;height:100px;overflow:hidden;position:relative;}
</style><script type="text/javascript"> function moveElement(elementID,final_x,final_y,interval){
    var elem = document.getElementById(elementID);
    if(elem.movement){
        clearTimeout(elem.movement);
    }
    var xpos = parseInt(elem.style.left);
    var ypos = parseInt(elem.style.top);
    if(xpos == final_x && ypos == final_y){
        return true;
    }
    if(xpos < final_x){
        var dist = Math.ceil((final_x - xpos)/10);
        xpos = xpos + dist;
    }
    if(xpos > final_x){
        var dist = Math.ceil((xpos - final_x)/10);
        xpos = xpos - dist;
    }
    if(ypos < final_y){
        var dist = Math.ceil((final_y - ypos)/10);
        ypos = ypos + dist;
    }
    if(ypos > final_y){
        var dist = Math.ceil((ypos - final_y)/10);
        ypos = ypos - dist;
    }
    elem.style.left = xpos + "px";
    elem.style.top = ypos + "px";
    var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
    elem.movement = setTimeout(repeat,interval);
}
function prepareSlideshow(){
    var preview = document.getElementById("preview");
    preview.style.position = "absolute";
    preview.style.left = "0px";
    preview.style.top = "0px";
    var list = document.getElementById("linklist");
    var links = list.getElementsByTagName("a");
    links[0].onclick = function(){
        moveElement("preview",-100,0,10);
    }
}
window.onload = prepareSlideshow; </script>
</head><body>
<div id="linklist">
<a href="#">左</a>
<a href="#">右</a>
</div>
<div id="slideshow">
<img src="http://84.images22.51img1.com/6000/rao3324180/483596d8735195a521d2bf28c504b975.gif" id="preview" />
</div>
</body>
</html>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!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=gb2312" />
<title>鼠标控制左右滚动图片可自动翻滚</title>
<style type="text/css">

</style>
</head>
<body>
<div class="rollBox">
     <div class="LeftBotton" onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()"></div>
     <div class="Cont" id="ISL_Cont">
      <div class="ScrCont">
       <div id="List1">

        
         <div class="pic">
          <a href="/" target="_blank"><img src="http://www.codefans.net/jscss/demoimg/wall_s1.jpg" width="109" height="87" /></a>
          <p><a href="#" target="_blank">风景美如画</a></p>
         </div>

<div class="pic">
          <a href="/" target="_blank"><img src="http://www.codefans.net/jscss/demoimg/wall_s2.jpg" width="109" height="87"  /></a>
          <p><a href="#" target="_blank">千里之行</a></p>
         </div>
         <div class="pic">
          <a href="/" target="_blank"><img src="http://www.codefans.net/jscss/demoimg/wall_s3.jpg" width="109" height="87" /></a>
          <p><a href="#" target="_blank">学习源码站</a></p>
         </div>
         <div class="pic">
          <a href="/" target="_blank"><img src="http://www.codefans.net/jscss/demoimg/wall_s4.jpg" width="109" height="87" /></a>
          <p><a href="#" target="_blank">每一款都测试</a></p>
         </div>
         <div class="pic">
          <a href="/" target="_blank"><img src="http://www.codefans.net/jscss/demoimg/wall_s5.jpg" width="109" height="87" alt="你难道不喜欢" /></a>
          <p><a href="#" target="_blank">你难道不喜欢</a></p>
         </div>
<div class="pic">
          <a href="/" target="_blank"><img src="http://www.codefans.net/jscss/demoimg/wall_s6.jpg" width="109" height="87" /></a>
          <p><a href="#" target="_blank">你太令我失望了</a></p>
         </div>
         <div class="pic">
          <a href="/" target="_blank"><img src="http://www.codefans.net/jscss/demoimg/wall_s7.jpg" width="109" height="87" /></a>
          <p><a href="#" target="_blank">今天早点睡</a></p>
         </div>
        

       </div>
       <div id="List2"></div>
      </div>
     </div>
     <div class="RightBotton" onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()"></div>
    </div>
   </div><script language="javascript" type="text/javascript">
<![CDATA[//><!]]>
</script>
</body>
</html>