0

我正在使用 jQuery 工具 ( http://flowplayer.org/tools/tabs/ ) 创建幻灯片。jQuery Tools 中的幻灯片是选项卡插件的扩展，因此您首先创建选项卡（在容器元素上，UL#viewtabs），然后在同一元素上设置幻灯片。对于我目前正在处理的项目，我必须在某个时候停止幻灯片放映并破坏选项卡行为（该元素仍然显示但停止作为选项卡运行）。然后，进一步，我必须将选项卡行为重新附加到同一元素 UL#viewtabs，然后是幻灯片。它适用于选项卡，但不适用于幻灯片。我在下面做了一个简单的测试用例来说明这个问题。

我真的很感谢你的帮助！

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; iso-8859-1" />
    <style type="text/css">
    <!--
    ul {position: absolute; top: 20px; left: 20px; margin: 0; padding: 0; list-style: none;}
    li {float: left; margin: 0 1px 0 0; padding:4px; background-color: #CCC; list-style: none; text-align: center; cursor: pointer;}
    li.current {background-color:#999; }
    #viewpanes {position: absolute; top: 60px; left: 20px; width: 640px; height: 400px; border: solid 1px #000;}
    .viewpane {background-color: #69F; line-height: 400px; text-align: center;}
    -->
    </style>
  </head>
  <body>
    <ul id="viewtabs">
      <li>Tab 0</li>
      <li>Tab 1</li>
      <li>Tab 2</li>
      <li>Tab 3</li>
      <li>Tab 4</li>
      <li>Tab 5</li>
      <li>Tab 6</li>
    </ul>
    <div id="viewpanes">
      <div class="viewpane">Pane 0</div>
      <div class="viewpane">Pane 1</div>
      <div class="viewpane">Pane 2</div>
      <div class="viewpane">Pane 3</div>
      <div class="viewpane">Pane 4</div>
      <div class="viewpane">Pane 5</div>
      <div class="viewpane">Pane 6</div>
    </div>

    <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js?foo"></script>
    <script type="text/javascript"">
    //<![CDATA[
    (function($) {
        $(document).ready(function() {
        $("#viewtabs").tabs(".viewpane",{ rotate: true }); // Create tabs
        $("#viewtabs").slideshow({ // Create slideshow and launch
          autoplay: true,
          autopause: false,
          interval: 500,
          onBeforePlay: function() { alert("Start"); }
        });
        // Let the slideshow play for a few seconds then...
        window.setTimeout(function() {
            $("#viewtabs").data("slideshow").stop(); // Stop slideshow
            $("#viewtabs").data("tabs").destroy(); // Destroy tabs

            $("#viewtabs").tabs(".viewpane",{ rotate: true }); // Create tabs again (OK)
          $("#viewtabs").slideshow({ // Create slideshow again and launch... Doesn't work :-(
            autoplay: true,
            autopause: false,
            interval: 250,
            onBeforePlay: function() { alert("Start again"); }
          });
        }, 5000);
      });
    }(jQuery));
    //]]>
    </script>
  </body>
</html>
4

1 回答 1

0

使用该removeData功能清除现有幻灯片：

$("#viewtabs").data("slideshow").stop(); // Stop slideshow
$("#viewtabs").removeData('slideshow');
于 2011-01-14T23:47:27.503 回答