我熬夜只是试图解决JQuery幻灯片,但我不确定为什么它没有按预期工作。我忘了抓住这个例子但是现在我的笔记本电脑不能和我在一起,所以如果你需要查看这个例子,我会在几个小时之后发布。
我借用了插件的功能:http://medienfreunde.com/lab/innerfade/
<script>
jQuery.noConflict();
$(document).ready( function(){
$('li#slider_reel').innerfade({
animationtype:'fade',
speed: 'slow',
timeout: 4000,
type: 'sequence',
containerheight: '648px'; });
});
</script>
<div id="slider_view">
<div id="slider_reel">
<ul>
<li><img src="slide/A.jpg"></li>
<li><img src="slide/B.jpg"></li>
<li><img src="slide/C.jpg"></li>
<li><img src="slide/D.jpg"></li>
</ul>
</div>
</div>
<!--end reel-->
ul#slider_reel li img{
border: 1px solid #ccc;
padding: 4px;
}
.fade{
margin-bottom: 2em;
}
.fade p{
margin-bottom: 2em;
text-align: center;
width: 100%;
background: #fff;
}
结果:所有图像都以长垂直顺序出现(就像堆叠或堆叠在一起)。无法理解为什么它表现得像这样。提前感谢您的帮助
修改 我道歉。它确实有ul和li - 我忘记将它们添加到里面。得到了相同的结果。
编辑II 我终于搞定了。我想我错过了一些'}'或者其他东西,而且我用实际文件而不是href替换了脚本。
非常感谢你的帮助!
答案 0 :(得分:0)
修复你的选择器没有UL或LI然后再试一次
答案 1 :(得分:0)
问题可能出在你的CSS中:
ul#slider_reel li img{
border: 1px solid #ccc;
padding: 4px;
}
复制+粘贴代码不是一个好主意。此规则根本不适用,因为您没有任何ul
元素id
slider_reel
。您有div
个标签。
我会先尝试隐藏图像,然后运行它:
$('#slider_reel img').hide();
// Innerfade code
答案 2 :(得分:0)
我有它的工作, http://jsfiddle.net/BceNn/6/
其中一个问题:
containerheight: '648px'; /*REMOVE THIS SEMICOLON*/ });/*REMOVE THIS SEMICOLON*/
编辑:这是工作代码。
<script type="text/javascript">
$(document).ready( function(){
$('#slider_reel').innerfade({
animationtype:'fade',
speed: 'slow',
timeout: 4000,
type: 'sequence',
containerheight: '648px'
})
});
</script>
<ul id="slider_reel">
<li><img src="slide/A.jpg"></li>
<li><img src="slide/B.jpg"></li>
<li><img src="slide/C.jpg"></li>
<li><img src="slide/D.jpg"></li>
</ul>