Question

如何点击滑块外的按钮重新启动滑块？我用这个滑块http://www.htmldrive.net/items/show/59/slideshow-feature-list 当我点击此按钮时，我想再次从第一张幻灯片开始。我使用默认“-version”上的滑块。我的英语很差。

Answer 1

简短回答

如果使用默认代码启动滑块：

$.featureList(
    $("#tabs li a"),
    $("#output li"), {
        start_item : 1
    }
);

您可以使用以下代码行重新启动它：

$("#tabs li:first-child a").click();

如果您没有使用默认选择器，只需更改该选择器以匹配您自己的选择器。

关于重置按钮的额外说明。

在html中添加一个按钮，例如：

<button id="resetSlider" type="button">Reset slider</button>

然后将以下代码放在脚本文件中或脚本标记之间。

$("#resetSlider").click(function(){
    $("#tabs li:first-child a").click();
});

Answer 2

这应该有效：

我修改了featureList函数，将该按钮作为另一个参数，然后在jquery.featureList-1.0.1.js内的按钮中添加了一个单击功能。

您必须使用查询将函数调用扩展到按钮，如下所示：

$.featureList(
    $("#tabs li a"),
    $("#output li"), {
        start_item  :   1
    }, 
    $("#resetButton")
);

在这里查看整个代码：

＆＃13;

/*
 * FeatureList - simple and easy creation of an interactive "Featured Items" widget
 * Examples and documentation at: http://jqueryglobe.com/article/feature_list/
 * Version: 1.0.1 (01/09/2009)
 * Copyright (c) 2009 jQueryGlobe
 * Licensed under the MIT License: http://en.wikipedia.org/wiki/MIT_License
 * Requires: jQuery v1.3+
 */
;
(function($) {
  $.fn.featureList = function(options) {
    var tabs = $(this);
    var output = $(options.output);

    new jQuery.featureList(tabs, output, options);

    return this;
  };

  $.featureList = function(tabs, output, options, resetButton) {
    function slide(nr) {
      if (typeof nr == "undefined") {
        nr = visible_item + 1;
        nr = nr >= total_items ? 0 : nr;
      }

      tabs.removeClass('current').filter(":eq(" + nr + ")").addClass('current');

      output.stop(true, true).filter(":visible").fadeOut();
      output.filter(":eq(" + nr + ")").fadeIn(function() {
        visible_item = nr;
      });
    }

    var options = options || {};
    var total_items = tabs.length;
    var visible_item = options.start_item || 0;

    options.pause_on_hover = options.pause_on_hover || true;
    options.transition_interval = options.transition_interval || 5000;

    output.hide().eq(visible_item).show();
    tabs.eq(visible_item).addClass('current');

    tabs.click(function() {
      if ($(this).hasClass('current')) {
        return false;
      }

      slide(tabs.index(this));
    });

    resetButton.click(function() {
      slide(0);
    });

    if (options.transition_interval > 0) {
      var timer = setInterval(function() {
        slide();
      }, options.transition_interval);

      if (options.pause_on_hover) {
        tabs.mouseenter(function() {
          clearInterval(timer);

        }).mouseleave(function() {
          clearInterval(timer);
          timer = setInterval(function() {
            slide();
          }, options.transition_interval);
        });
      }
    }

  };
})(jQuery);

＆＃13;

body {
    background: #EEE;
    font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

#content {
    width: 750px;
    margin: 50px auto;
    padding: 20px;
    background: #FFF;
    border: 1px solid #CCC;
}

h1 {
    margin: 0;
}

hr {
    border: none;
    height: 1px;
    line-height: 1px;
    background: #CCC;
    margin-bottom: 20px;
    padding: 0;
}

p {
    margin: 0;
    padding: 7px 0;
}

.clear {
    clear: both;
    line-height: 1px;
    font-size: 1px;
}

a {
    outline-color: #888;
}

＆＃13;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="imagetoolbar" content="no" />
  <title>Feature List | Demo page</title>
  <link rel="stylesheet" href="style.css" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
  <script type="text/javascript" src="jquery.featureList-1.0.1.js"></script>
  <style type="text/css">
    h3 {
      margin: 0;
      padding: 7px 0 0 0;
      font-size: 16px;
      text-transform: uppercase;
    }
    div#feature_list {
      width: 750px;
      height: 240px;
      overflow: hidden;
      position: relative;
    }
    div#feature_list ul {
      position: absolute;
      top: 0;
      list-style: none;
      padding: 0;
      margin: 0;
    }
    ul#tabs {
      left: 0;
      z-index: 2;
      width: 320px;
    }
    ul#tabs li {
      font-size: 12px;
      font-family: Arial;
    }
    ul#tabs li img {
      padding: 5px;
      border: none;
      float: left;
      margin: 10px 10px 0 0;
    }
    ul#tabs li a {
      color: #222;
      text-decoration: none;
      display: block;
      padding: 10px;
      height: 60px;
      outline: none;
    }
    ul#tabs li a:hover {
      text-decoration: underline;
    }
    ul#tabs li a.current {
      background: url('feature-tab-current.png');
      color: #FFF;
    }
    ul#tabs li a.current:hover {
      text-decoration: none;
      cursor: default;
    }
    ul#output {
      right: 0;
      width: 463px;
      height: 240px;
      position: relative;
    }
    ul#output li {
      position: absolute;
      width: 463px;
      height: 240px;
    }
    ul#output li a {
      position: absolute;
      bottom: 10px;
      right: 10px;
      padding: 8px 12px;
      text-decoration: none;
      font-size: 11px;
      color: #FFF;
      background: #000;
      -moz-border-radius: 5px;
    }
    ul#output li a:hover {
      background: #D33431;
    }
  </style>
  <script language="javascript">
    $(document).ready(function() {

      $.featureList(
        $("#tabs li a"),
        $("#output li"), {
          start_item: 1
        },
        $("#resetButton")
      );
      /*
            
      // Alternative

            
      $('#tabs li a').featureList({
          output          :   '#output li',
          start_item      :   1
      });

      */

    });
  </script>
</head>

<body>
  <div id="content">
    <h1>Feature List</h1>

    <p>This is a demo page. You can view the supporting article <a href="http://jqueryglobe.com/article/feature-list">here</a>
    </p>

    <hr />

    <div id="feature_list">
      <ul id="tabs">
        <li>
          <a href="javascript:;">
            <img src="services.png" />
            <h3>Services</h3>
            <span>Lorem ipsum dolor sit amet consect</span>
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <img src="programming.png" />
            <h3>Programming</h3>
            <span>Lorem ipsum dolor sit amet consect</span>
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <img src="applications.png" />
            <h3>Applications</h3>
            <span>Lorem ipsum dolor sit amet consect</span>
          </a>
        </li>
      </ul>
      <ul id="output">
        <li>
          <img src="sample1.jpg" />
          <a href="#">See project details</a>
        </li>
        <li>
          <img src="sample2.jpg" />
          <a href="#">See project details</a>
        </li>
        <li>
          <img src="sample3.jpg" />
          <a href="#">See project details</a>
        </li>
      </ul>

    </div>
  </div>
  <button id="resetButton">reset</button>
  More script and css style : <a href="http://www.htmldrive.net/" title="HTML DRIVE - Free DHMTL Scripts,Jquery plugins,Javascript,CSS,CSS3,Html5 Library">www.htmldrive.net </a>
</body>

</html>

＆＃13;

Answer 3

我能够通过对featureList插件的轻微修改来实现这一目的。

featureList有一个私人功能＆＃39; slide＆＃39;这正是你想要的。如果你暴露这个，那么你可以按照你的要求使用它。您可以通过添加featureList-1.0.0.js来执行此操作，如下所示：

          ...

          }).mouseleave(function() {
          clearInterval( timer );
          timer = setInterval(function () {
            slide();
          }, options.transition_interval);
        });
      }

      // YOU ADD THE FOLLOWING LINE
      return { slide: slide };

    }
  };
})(jQuery);

接下来修改插件的初始化，如下所示：

var fl = $.featureList( $("#tabs li a"), $("#output li"), { start_item : 1 } );

您现在可以致电fl.slide(0);返回第一张幻灯片：）

在Jquery onClick上重新启动Slider？

3 个答案:

简短回答

关于重置按钮的额外说明。