调用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>

brow()是一个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

您可以简单地返回图像标签（例如

<img src="images/image1.jpg" /><img src="images/image1.jpg" />

...）。然后在ajax成功回调中替换 - $('#script').html(data); - 你可以做

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