jquery - 调用 jQuery 超大插件 onclick

Question

我正在尝试调用超大插件( http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/ )onclick，到目前为止，当我单击不同的菜单时，图像会发生变化，但看起来由超大插件构建的 html 标记不会被重建，现在我有这个:

html 调用函数 Brown() onclick:

<ul id="rooms_menu" style="display:none;">
<li><a href="javascript:;" onclick="brown()">menu title</a></li>
<p class="rooms_desc">description text</p>

我回显 ajax 响应的 html:

<div id="script">

<script>$(function(){
        $.supersized({
                      slides    :   [
                     {image     : 'img/rooms-default.jpg'}
                     //{image     : 'img/rooms-default.jpg'}
                                    ]
                     })
                     })</script>

</div>

brown() 是一个 ajax 函数:

 function brown(){
      $.ajax({
      url: 'ajax.php?action=brown',
      success: function(data){
        $('#script').html(data);
             }
           })
    
         }

然后ajax.php文件将其内容加载到#script div:

switch($_GET["action"]){
      case "brown":
      echo "<script>$(function(){
         $.supersized({
                   slides :     [
               {image  : 'img/rooms-brown-01.jpg'},
               {image  : 'img/rooms-brown-02.jpg'}
                            ]
                            })
         
                            })</script>";
      break;
      case "rose":  etc.....

因此，当我第一次单击菜单时，图像会更新，但如果我单击另一个菜单标题，图像也会更新，但幻灯片开始困惑，当我使用时，看起来 html 标记没有重建每个菜单标题只有一张图像(超大数组中只有一张图像)没有问题。 R。

Answer 1

在使用

添加新脚本之前

$('#script').html(data);

尝试调用此:

if($.supersized.vars.slideshow_interval){
  clearInterval($.supersized.vars.slideshow_interval);
}

该方法应如下所示:

function brown(){
  $.ajax({
    url: 'ajax.php?action=brown',
    success: function(data){
      if($.supersized.vars.slideshow_interval){
        clearInterval($.supersized.vars.slideshow_interval);
      }
      $('#script').html(data);
    }
  });

}