如何点击滑块外的按钮重新启动滑块？ 我用这个滑块http://www.htmldrive.net/items/show/59/slideshow-feature-list 当我点击此按钮时，我想再次从第一张幻灯片开始。我使用默认“-version”上的滑块。我的英语很差。
答案 0 :(得分：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();
});
答案 1 :(得分：0)
这应该有效：
我修改了featureList函数，将该按钮作为另一个参数，然后在jquery.featureList-1.0.1.js内的按钮中添加了一个单击功能。
您必须使用查询将函数调用扩展到按钮，如下所示：
$.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>
答案 2 :(得分：0)
我能够通过对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);返回第一张幻灯片：）