Javascript 让这些箭头滚动？jquery&；html

我正在尝试用图像制作一部小电影。我希望能够水平滚动以查看所有图像

我有：

<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样式化的整个事情，我有显示器：隐藏在拇指div。我只需要箭头功能，但我不知道什么类型的代码使用。任何帮助都会很好

如果你不太精通javascript，那么就选择插件。这个怎么样：

非常容易实现。

$('.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();
});

.广告拇指列表
{
宽度：650px；
}
.ad拇指列表李
{
显示：块；
浮动：左；
宽度：100px；
高度：100px；
右边距：20px；
边框：实心1px#ccc；
}
.拇指
{
溢出：隐藏；
高度：120px；
宽度：280px；
}            

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

$（函数（）{
$（'.forward'）。单击（函数（）{
$（'.thumbs'）.animate（{scrollLeft:'+='+$（'.ad thumbs list li'）.width（）}）；
});
$（'.back'）。单击（函数（）{
$（'.thumbs'）.animate（{scrollLeft:'-='+$（'.ad thumbs list li'）.width（）}）；
});
});

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

返回







向前地

您将ul包装在div中有什么原因吗？你能不能先去掉包装器div，然后给ul一个

拇指

类？它们都有不同的样式。我把大拇指放在那里作为ul的容器。我把显示器：隐藏；连接到thumbs div，因此如果它比thumbs div大，则其内部的任何内容（ul）都将被切断。出于兼容性原因，您需要删除放置在

.thumbs

div上的

显示：hidden

。jQuery隐藏了其他的东西。我想他想自己做这件事。看起来这会有用，但我无法让它做任何事情。

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