javascript - 让这些箭头滚动？ 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 对整个事物进行了样式化，并且在 thumbs div 上设置了 display:hidden。我只需要箭头功能，但我不知道要使用哪种类型的代码。任何帮助都会很棒!

Answer 1

<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>