图片效果。望大神详细解答,多谢!

求一个图片效果。望大神详细解答,谢谢!!!!!如图啊 点击 左右的 箭头 是图片整体移动。箭头有2种样式 一个是

求一个图片效果。望大神详细解答,谢谢!!!!!
图片效果。望大神详细解答,多谢!
如图啊 点击 左右的 箭头 是图片整体移动。箭头有2种样式 一个是正常状态 一个是 点击跟鼠标放上去的状态。 小图上的 箭头 是用来更改图片位置的,就是点击左箭头 就会像左移动一个位置 点击右边的 就会向右移动一个位置,每个小图都有这个 效果。谢谢!!! 图片展示?滚动?移位
[解决办法]
之前写过一个类似的。。

用绝对定位就可以,当点击按钮的时候,动态的改变图片的绝对定位的top和left就可以了。 然后设置外围container overflow:hidden。

主要就是操作DOM,改变top和left
[解决办法]
看LZ的意思是來求碼的,這個弄起來還是有點複雜的。

友情幫項吧!
[解决办法]
<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>

[解决办法]
自己扩展下吧
[解决办法]
按照你的图片写了一个,去这里下载:图片滚动切换位置jquery插件
[解决办法]

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

不错,收藏了。。