jquery - 在这种情况下我应该使用哪个 jQuery 类？

Question

当鼠标悬停在箭头按钮上时，我试图让图像从右到左一个接一个地移动，但我无法理解我可以如何实现以及可以实现哪个 jQuery 类来执行确切的结果.

我的代码如下:

<div id="logos">
    <ul>
        <li style="float:left; margin-left:0px; margin-right:40px; "><img src="images/logo&typography_porjects.png" width="300" height="130" /></li>
        <li><img src="images/logo-no-image.jpg" height="130" width="130" /></li>
        <li><img src="images/logo-no-image.jpg" height="130" width="130" /></li>
        <li><img src="images/logo-no-image.jpg" height="130" width="130" /></li>
        <li><img src="images/logo-no-image.jpg" height="130" width="130" /></li>
        <li><img src="images/logo-no-image.jpg" height="130" width="130" /></li>
        <li><img src="images/logo-no-image.jpg" height="130" width="130" /></li>
        <div class="clear"></div>
        <li style="float:left; margin-left:0px;"><img src="images/logo-no-image.jpg" height="130" width="130" /></li>
        <li><img src="images/logo-no-image.jpg" height="130" width="130" /></li>
        <li><img src="images/logo-no-image.jpg" height="130" width="130" /></li>
        <li><img src="images/logo-no-image.jpg" height="130" width="130" /></li>
        <li><img src="images/logo-no-image.jpg" height="130" width="130" /></li>
        <li><img src="images/logo-no-image.jpg" height="130" width="130" /></li>
        <li><img src="images/logo-no-image.jpg" height="130" width="130" /></li>
        <li><img src="images/logo-no-image.jpg" height="130" width="130" /></li>              
    </ul>
</div>  

CSS 代码是:

#logos { width:1200px; float:right; }
#logos ul { list-style:none; float:right; overflow:hidden; }
#logos ul li { display:inline; margin:0 0 0 10px; }
.clear { height:30px; width:100%; clear:both; }

Answer 1

要创建这种效果非常简单，您有两个 div，一个外部 div 隐藏了内部 div 的溢出，它通过改变 margin-left 向左和“向右”移动。为负值。

HTML

<div id="hide_overflow">
<div id="moving_panel">
   <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <!-- [... etc ... ] !-->
   </ul>
</div>

我正在使用 <li>在上面的示例中，但您可以轻松地将它们更改为 <img>

CSS

li {
    background: lightgray;
    padding: 20px;
    margin: 5px;
    float: left;
}

#hide_overflow {
    overflow: hidden;
}

#hide_overflow, #moving_panel {
    height: 70px;
}

jQuery

$('#left').click(function() {
    var $panel = $('#moving_panel');
    if (!parseInt($panel.css('margin-left'))) return;
    $panel.animate({
        marginLeft: '+=200'
    });
});

$('#right').click(function() {
    $('#moving_panel').animate({
        marginLeft: '-=200'
    });
});

这是一个非常基本的示例，可以帮助您入门。有大量可用于 jQuery 的图像幻灯片类型插件。

fiddle : http://jsfiddle.net/garreh/9mYJk/