求一个图片效果。望大神详细解答，谢谢！！！！！


如图啊 点击 左右的 箭头 是图片整体移动。箭头有2种样式 一个是正常状态 一个是 点击跟鼠标放上去的状态。 小图上的 箭头 是用来更改图片位置的，就是点击左箭头 就会像左移动一个位置 点击右边的 就会向右移动一个位置，每个小图都有这个 效果。谢谢！！！图片展示 滚动 移位

解决方案 »

  1.   

    之前写过一个类似的。。用绝对定位就可以，当点击按钮的时候，动态的改变图片的绝对定位的top和left就可以了。 然后设置外围container overflow:hidden。主要就是操作DOM，改变top和left
      

  2.   

    <html>
        <style type="text/css">
      
        #demo {
         background: #FFF;
         overflow:hidden;
         border: 1px dashed #CCC;
         width: 510px;
        }
        #demo img {
         border: 3px solid #F2F2F2;
        }
        #indemo {
         float: left;
         width: 800%;
        }
        #demo1 {
         float: left;
        }
        #demo2 {
         float: left;
        }
        
        #myBtnlast {
         float: left;
        } 
         #myBtnNext {
         float: left
        } 
    </style>

    <div style="margin:auto 0;float: left;">

    <input type="button" id="myBtnlast" value="<<"/>
     

    </div>
    <div style="margin:auto 0;float: left;">
     <div id="demo">
        <div id="indemo">
        <div id="demo1">
        <a href="#"><img height='500' width='500' src="1363155187_7217.jpg" border="0" /></a>
        <a href="#"><img height='500' width='500' src="1363155187_7217.jpg" border="0" /></a>
        <a href="#"><img height='500' width='500' src="1363155187_7217.jpg" border="0" /></a>
        <a href="#"><img height='500' width='500' src="1363155187_7217.jpg" border="0" /></a>
        
        </div>
        <div id="demo2"></div>
        </div>
      
        </div>
      </div>
           <div style="margin:auto 0">
    <input type="button" onclick="javascript:lastImg();" id="myBtnNext" value=">>"/>
      </div>     
       
        
        <script>
        var speed=10; //数字越大速度越慢
        var tab=document.getElementById("demo");
        var tab1=document.getElementById("demo1");
        var tab2=document.getElementById("demo2");
        tab2.innerHTML=tab1.innerHTML;
        var MyMar1;
        // 按钮触发翻滚
        function lastImg()
        {
         if (null == MyMar1)
         {
          MyMar1=setInterval(nextImg,speed);
           
           
           setTimeout("stopa()", 5000);
         }
                 //
        }
        
        function stopa()
        {
         clearInterval(MyMar1);
         MyMar1 = null;
        }
        
        function nextImg()
        {
        
         if(tab.scrollLeft>0)
        {
          tab.scrollLeft--;
          
        }
        else
        {
         tab.scrollLeft+=tab2.offsetWidth
        }
        
        
        }
            function Marquee(){
        if(tab.scrollLeft<=0)
        {
        tab.scrollLeft+=tab2.offsetWidth
       }
       else{
        tab.scrollLeft--
       }
       }
       
        // 图片无缝翻滚
        //var MyMar=setInterval(Marquee,speed);
        //tab.onmouseover=function() {clearInterval(MyMar)};
        //tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};    </script></html>
      

  3.   

    按照你的图片写了一个，去这里下载：图片滚动切换位置jquery插件