问题描述
嗨，如何通过单击滑块外部的按钮来重新启动滑块？ 我使用此滑块当我单击此按钮时，我想从第一张幻灯片再次开始。 我在默认的“版本”上使用滑块。 抱歉我的英语不好。
1楼
Sceptic
1
已采纳
2015-07-25 14:49:47
简短答案
如果使用默认代码启动滑块：
$.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();
});
2楼
w.stoettinger
0
2015-07-25 14:39:38
这应该工作：
我修改了featureList函数以将按钮作为另一个参数，然后在jquery.featureList-1.0.1.js向按钮添加了click函数。
您必须将带有查询的函数调用扩展到按钮，如下所示：
$.featureList(
$("#tabs li a"),
$("#output li"), {
start_item : 1
},
$("#resetButton")
);
在这里查看整个代码：
/* * 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);
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; }
<!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>
3楼
Nathan
0
2015-07-25 14:42:17
通过对FeatureList插件进行很小的修改，我就能实现这一目标。
featureList具有一个私有功能“ slide”，它可以满足您的需求。 如果公开此内容，则可以按要求使用它。 您可以通过添加到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);
回到第一张幻灯片:)