Question

我正在使用jQuery Tools（http://flowplayer.org/tools/tabs/）来创建幻灯片。 jQuery Tools中的幻灯片显示是tabs插件的扩展，因此您首先要创建选项卡（在容器元素上，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>

Answer 1

使用removeData功能清除现有的幻灯片显示：

$("#viewtabs").data("slideshow").stop(); // Stop slideshow
$("#viewtabs").removeData('slideshow');

JQuery Tools幻灯片放映不能连接到同一个元素两次？

1 个答案: