使这些箭头滚动？ jquery＆html

Question

我正在尝试创建一个带有图像的小幻灯片。我想能够水平滚动查看所有图像。

我：

<div class="gallery"> 
    <div class="back" style="opacity: 0.6;"></div> 
    <div class="thumbs">  
     <ul class="ad-thumb-list"> 
      <li> 
       <img id="thumb01" src="../jpeg/thumbnails/01.jpg" title="page 1"/> 
      </li> 
      (I have many <li>'s listed) 
     </ul>  
    </div> 
    <div class="forward" style="opacity: 0.6;"></div> 
</div> 

我的CSS风格化的整个事情，和我有显示：隐藏在大拇指股利。我只需要箭头来运行，但我不知道使用什么类型的代码。任何帮助将是伟大的！

Answer 1

如果您不擅长javascript，请选择插件。这个怎么样：

http://sorgalla.com/projects/jcarousel/

http://sorgalla.com/projects/jcarousel/examples/static_circular.html

很容易实现。

Answer 2

$('.gallery').each(function() { 
    var $images = $('.thumbs li', this); 
    var $forward = $('.forward', this); 
    var $back = $('.back', this); 

    var numImages = $images.length; 

    var index = 0; 

    function update() 
    { 
     index = (index + numImages)%numImages; 
     $images.hide().eq(index).show() 
    } 

    $back.click(function() { 
     index--; 
     update(); 
    }); 

    $next.click(function() { 
     index++; 
     update(); 
    }); 

    update(); 
}); 

Answer 3

<style type="text/css"> 
    .ad-thumb-list 
    { 
     width:650px; 
     } 
    .ad-thumb-list li 
    { 
     display:block; 
     float:left; 
     width:100px; 
     height:100px; 
     margin-right:20px; 
     border:solid 1px #ccc; 
     } 
    .thumbs 
    { 
     overflow:hidden; 
     height:120px; 
     width:280px; 
     }    
</style> 

和JS：

<script type="text/javascript"> 
    $(function() { 

     $('.forward').click(function() { 
      $('.thumbs').animate({ scrollLeft: '+=' + $('.ad-thumb-list li').width() }); 
     }); 
     $('.back').click(function() { 
      $('.thumbs').animate({ scrollLeft: '-=' + $('.ad-thumb-list li').width() }); 
     }); 
    }); 
</script> 

和HTML

<div class="gallery"> 
    <div class="back" style="opacity: 0.6;">Back</div> 
     <div class="thumbs">  
     <ul class="ad-thumb-list"> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
     </ul>  
     </div> 
    <div class="forward" style="opacity: 0.6;">Forward</div> 
</div>