javascript - 如何在jquery中调用两个fadeslideshow插件

Question

我的主页有包含 5 张幻灯片的 fadeslideshow。用于幻灯片播放的插件是http://plugins.jquery.com/project/fadeslideshow .

在主页中，我还有菜单栏，其中包含菜单项。当用户单击菜单项时，应删除幻灯片内容，并应添加一张幻灯片和菜单项内容。还有一个问题是，我需要 autoslideshow true 对于主页，但 false 对于菜单项幻灯片。所以我需要在jquery中调用slideshow.js文件两次。我尝试过这个，但它不起作用。

我调用插件的 jquery 代码。这用于主页。

slide=jQuery('#slideshow').fadeSlideShow(
{width:936, height:476, autoplay:true});

当用户单击菜单项时，“#slideshow”内容将被删除，菜单项 div 将被加载。

$('ul.dropdown-menu li a').click( function(event) {
    $('#slideshowWrapper1').empty().load('test.html');
    slide=jQuery('#slideshow').fadeSlideShow(
    { width:936, height:476, autoplay:false});

    var newTopicContent = $(this).attr('id');
    alert(newTopicContent);


   });  

带有 5 张幻灯片的主页代码

<div id="slideshowWrapper1">
            <div id="slideshow" class="slides">
                <div class="5">
                    <div class="txtCenter" > <p> This is 5th slide</p></div>    
                </div>              
                <div class="4">
                    <div class="txtCenter" >
                <img src="images/new/home4.png" alt="" /></div>
                </div>
                <div class="3">
                    <div class="txtCenter" ><p>This is third slide</p></div>                    
                </div>
                <div class="2">

                    <div style="text-align: center;margin-top: 2%;"><img src="images/new/some.png" alt="" /></div>
                    <br style="clear:both;"/>
                </div>
                <div class="1">
                    <div><img src="images/new/recreate.png" alt="" /></div>
                    <br style="clear:both;"/>
                </div>  

            </div>          
        </div>

test.html 页面的菜单项内容不同。在我的代码中，第一张幻灯片运行得很好。但单击菜单项后幻灯片无法正常工作。所有幻灯片内容都位于同一页面中。我需要帮助。提前致谢!!

Answer 1

如果我理解正确的话，您想删除第一个幻灯片以替换为通过 test.html 返回的新幻灯片吗？

我认为您必须等待使用 load(url, callback) 加载 test.html请参阅http://api.jquery.com/load/

$('ul.dropdown-menu li a').click( function(event) {
    var id = $(this).attr('id');
    $('#slideshowWrapper1').empty().load('test.html', function() {
        slide=jQuery('#slideshow').fadeSlideShow(
        { width:936, height:476, autoplay:false});

        var newTopicContent = id;
        alert(newTopicContent);
    });
});