Jquery幻灯片显示问题

时间:2011-05-23 04:25:38

标签: jquery slideshow

我熬夜只是试图解决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替换了脚本。

非常感谢你的帮助!

3 个答案:

答案 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>