Question

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

在主页中，我还有菜单栏，里面有菜单项。当用户单击菜单项时，应删除幻灯片显示内容，并且应添加另一个幻灯片显示菜单项内容。还有一个问题是，我需要autoslideshow对于主页是真的，但是对于菜单项幻灯片展示是假的。所以我需要在jquery中调用两次slideshow.js文件。我试过这个，但它不起作用。

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

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

当用户点击菜单项时，＃幻灯片＆＃39;内容将被删除，菜单项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);
    });
});

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

1 个答案: