我在这里使用JQuery Carousel插件:http://www.thomaslanciaux.pro/jquery/jquery_carousel.htm
我已经这样设置了:
<script type="text/javascript">
$(function(){
$(".carousel").carousel();
});
</script>
<div id="carouselholder">
<div class="carousel">
<ul>
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
</ul>
</div>
</div><!--CAROUSELHOLDER-->
但是,当我按下“下一步”按钮时,它似乎会移动整个ul
而不是li
。
有谁知道如何解决这个问题? (或者也许是一个更好的插件?)
下图:Element Inspector的屏幕截图:
答案 0 :(得分:1)
这个插件的文档看起来有点渺茫。似乎需要一些额外的样式才能使其工作,但没有一个例子说明了这一点。
您的设置是正确的,实际上它将移动整个UL分组,仅显示当前选择的li。使用上面的简单代码,我所做的只是添加以下CSS以使其工作:
li {
float: left;
}
只需在容器中添加一些样式以限制视图,你就应该好好去。
答案 1 :(得分:0)
我认为这就是它的工作方式
如果你在旋转木马包装上放一个宽度,所以它只显示一个图像,ul移动位置以显示下一个图像
li标签不移动
如果您想尝试其他插件,我推荐这个 http://caroufredsel.dev7studios.com/index.php。
答案 2 :(得分:0)
感谢大家的帮助,但我发现Cycle插件的修改版本运行得更好: