当鼠标悬停在箭头按钮上时,我试图让图像从右到左一个接一个地移动,但我无法理解我可以如何实现以及可以实现哪个 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; }
最佳答案
要创建这种效果非常简单,您有两个 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/
关于jquery - 在这种情况下我应该使用哪个 jQuery 类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6027291/