Question

当鼠标悬停在箭头按钮上时，我试图让图像从右向左逐个移动，但是我无法理解我可以实现的jQuery类以及执行确切结果的jQuery类

enter image description here

我的代码如下：

<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，一个out 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。

小提琴： http://jsfiddle.net/garreh/9mYJk/

Answer 2

你必须使用jQuery效果，比如这个：http://jqueryui.com/demos/effect/

或者使用toogle进行一些图像转换，例如更改图像的顶部和左侧坐标。

Answer 3

您可以使用适合您需求的图片库插件。查看this site

Answer 4

here is my take at it。它没有动画（好吧，马达是一行！）

代码？这样：

$('#arrow').click(function() {
    $('li:first').after($('li#arrow_li').prev());
});

标记（几乎不变）：

<div id="logos">
    <ul>
        <li style="float:left; margin-left:0px; margin-right:40px; "><img src="http://www.ssvworks.com/images/arctic_cat_logo2.png" width="300" height="130" /></li>
        <li><img src="http://www.nytha.com/design/logo.png" height="130" width="130" /></li>
        <li><img src="http://www.nytha.com/design/logo.png" height="130" width="130" /></li>
        <li><img src="http://www.nytha.com/design/logo.png" height="130" width="130" /></li>
        <li><img src="http://www.nytha.com/design/logo.png" height="130" width="130" /></li>
        <li><img src="http://www.nytha.com/design/logo.png" height="130" width="130" /></li>
        <li><img src="http://www.nytha.com/design/logo.png" height="130" width="130" /></li>
        <li style="float:left; margin-left:0px;"><img src="http://www.nytha.com/design/logo.png" height="130" width="130" /></li>
        <li><img src="http://www.nytha.com/design/logo.png" height="130" width="130" /></li>
        <li><img src="http://www.nytha.com/design/logo.png" height="130" width="130" /></li>
        <li><img src="http://www.nytha.com/design/logo.png" height="130" width="130" /></li>
        <li><img src="http://www.nytha.com/design/logo.png" height="130" width="130" /></li>
        <li><img src="http://www.nytha.com/design/logo.png" height="130" width="130" /></li>
        <li><img src="http://www.nytha.com/design/logo.png" height="130" width="130" /></li>
        <li><img src="http://homeflooringonline.com/product_image/Area/logo-rugs-auburn-universi836.jpg" height="130" width="130" /></li>
        <li id="arrow_li"><img src="http://china.keyence.com/products/sensors/fiberoptic/fsn/problem_arrow2.gif" height="130" width="60" id="arrow" /></li>
    </ul>
</div>

CSS（略有改动）：

#logos { width:900px; position: absolute; left: 54px; }
#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; }

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

4 个答案:

HTML

CSS

的jQuery