我正在尝试将我自己的功能添加到 jQuery 插件中，老实说它进展不顺利，我正在使用来自 here 的 easySlider 1.7。
我的想法是使用分页版本，上面的链接站点上有一个示例，但是当用户单击一个带编号的链接时暂停，我希望它跳到该幻灯片，然后继续。以下是我的尝试，我将发布整个插件并围绕我理解的部分和我添加的部分发表评论。
/*
* Easy Slider 1.7 - jQuery plugin
* written by Alen Grakalic
* http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
*
* Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* Built for jQuery library
* http://jquery.com
*
*/
/*
* markup example for $("#slider").easySlider();
*
* <div id="slider">
* <ul>
* <li><img src="images/01.jpg" alt="" /></li>
* <li><img src="images/02.jpg" alt="" /></li>
* <li><img src="images/03.jpg" alt="" /></li>
* <li><img src="images/04.jpg" alt="" /></li>
* <li><img src="images/05.jpg" alt="" /></li>
* </ul>
* </div>
*
*/
(function($) {
$.fn.easySlider = function(options){
// default configuration properties
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next',
controlsShow: true,
controlsBefore: '',
controlsAfter: '',
controlsFade: true,
firstId: 'firstBtn',
firstText: 'First',
firstShow: false,
lastId: 'lastBtn',
lastText: 'Last',
lastShow: false,
vertical: false,
speed: 800,
auto: false,
pause: 2000,
continuous: false,
numeric: false,
numericId: 'controls'
};
var options = $.extend(defaults, options);
this.each(function() {
var obj = $(this);
var s = $("li", obj).length;
var w = $("li", obj).width();
var h = $("li", obj).height();
var clickable = true;
obj.width(w);
obj.height(h);
obj.css("overflow","hidden");
var ts = s-1;
var t = 0;
$("ul", obj).css('width',s*w);
if(options.continuous){
$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
$("ul", obj).append($("ul li:nth-child(2)", obj).clone());
$("ul", obj).css('width',(s+1)*w);
};
if(!options.vertical) $("li", obj).css('float','left');
if(options.controlsShow){
var html = options.controlsBefore;
if(options.numeric){
html += '<ol id="'+ options.numericId +'"></ol>';
} else {
if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';
};
html += options.controlsAfter;
$(obj).after(html);
};
/**************************
This section creates the numbered list that the user can click, clicking a numbered link pauses the slider
*******************/
if(options.numeric){
for(var i=0;i<s;i++){
$(document.createElement("li"))
.attr('id',options.numericId + (i+1))
.html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
.appendTo($("#"+ options.numericId))
.click(function(){
animate($("a",$(this)).attr('rel'),true);
});
};
} else {
$("a","#"+options.nextId).click(function(){
animate("next",true);
});
$("a","#"+options.prevId).click(function(){
animate("prev",true);
});
$("a","#"+options.firstId).click(function(){
animate("first",true);
});
$("a","#"+options.lastId).click(function(){
animate("last",true);
});
};
/*The following code is my attempt to play and pause, the first created element is meant to stop the animation, but it just send it back to the first slide, the second created element, takes it to the second slide, I was hope one would pause and the other would play from the current slide****/
$(document.createElement("a"))
.attr('id', 'stop')
.html('<a>S</a>')
.appendTo($("#"+ options.numericId))
.click(function(){
//animate("first", true)
alert(defaults.continuous)
alert(defaults.auto)
animate(false)
});
$(document.createElement("a"))
.attr('id', 'stop')
.html('<a>P</a>')
.appendTo($("#"+ options.numericId))
.click(function(){
//animate("first", true)
alert(defaults.continuous)
alert(defaults.auto)
animate(true)
});
function setCurrent(i){
i = parseInt(i)+1;
$("li", "#" + options.numericId).removeClass("current");
$("li#" + options.numericId + i).addClass("current");
};
function adjust(){
if(t>ts) t=0;
if(t<0) t=ts;
if(!options.vertical) {
$("ul",obj).css("margin-left",(t*w*-1));
} else {
$("ul",obj).css("margin-left",(t*h*-1));
}
clickable = true;
if(options.numeric) setCurrent(t);
};
function animate(dir,clicked){
if (clickable){
clickable = false;
var ot = t;
switch(dir){
case "next":
t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;
break;
case "prev":
t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
break;
case "first":
t = 0;
break;
case "last":
t = ts;
break;
default:
t = dir;
break;
};
var diff = Math.abs(ot-t);
var speed = diff*options.speed;
if(!options.vertical) {
p = (t*w*-1);
$("ul",obj).animate(
{ marginLeft: p },
{ queue:false, duration:speed, complete:adjust }
);
} else {
p = (t*h*-1);
$("ul",obj).animate(
{ marginTop: p },
{ queue:false, duration:speed, complete:adjust }
);
};
if(!options.continuous && options.controlsFade){
if(t==ts){
$("a","#"+options.nextId).hide();
$("a","#"+options.lastId).hide();
} else {
$("a","#"+options.nextId).show();
$("a","#"+options.lastId).show();
};
if(t==0){
$("a","#"+options.prevId).hide();
$("a","#"+options.firstId).hide();
} else {
$("a","#"+options.prevId).show();
$("a","#"+options.firstId).show();
};
};
if(clicked) clearTimeout(timeout);
if(options.auto && dir=="next" && !clicked){;
timeout = setTimeout(function(){
animate("next",false);
},diff*options.speed+options.pause);
};
};
};
// init
var timeout;
if(options.auto){;
timeout = setTimeout(function(){
animate("next",false);
},options.pause);
};
if(options.numeric) setCurrent(0);
if(!options.continuous && options.controlsFade){
$("a","#"+options.prevId).hide();
$("a","#"+options.firstId).hide();
};
});
};
})(jQuery);
很明显，我的尝试还差得远，如果有人能在正确的方向上插入我，我会非常感激。
谢谢
最佳答案
为链接或传递给 slider 的整个元素添加悬停监听器，当用户单击或悬停时，您可以清除自动前进超时。当他们离开时，您可以重新设置超时并继续。
像这样的东西将适用于整个元素:
obj.hover(function() {
clearTimeout(timeout);
}, function() {
timeout = setTimeout(function(){
animate("next",false);
}, 2000);
});
您可以将它放在第 211 行附近，它应该可以工作。那是你要找的吗？还是您希望它仅在他们点击链接后暂停，然后等待他们离开链接？
如果是这种情况，您可以使用上面的代码，但要进行一些更改:
- 去掉第一个“clearTimeout(timeout);”这样当您将鼠标悬停在 slider 上时它就不会暂停。
- 通过更改“var timeout”来添加一个全局变量；到“var 超时，linkClickPausedSlider；”。
- 在“animate”函数中，设置 linkClickPausedSlider = clicked。
- 如果 linkClickPausedSlider == true，将我给你的代码更改为仅在用户悬停时设置超时，并在设置超时时将 linkClickPausedSlider 设置为 false。
那里...这应该是一个详尽的答案。希望这对你有帮助。 jQuery 快乐!
关于javascript - Jquery 插件帮助...需要添加我自己的功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2154265/