我发现了这个很棒的小 jquery 图像滑块片段:
var x = 2;
// function to switch the images.
function slideSwitch() {
var m = 5;
x += 1;
if (x > m) {
x = 1
}
$(".slideshow ul li:nth-child(n)").animate({opacity:0});
$(".slideshow ul li:nth-child(" + (x) + ")").animate({opacity:1});
}
$(document).ready(function() {
setInterval( "slideSwitch()", 5000 );
});
并且一直在尝试将其转换为插件以便能够多次使用它,但我没有任何运气......请提供任何帮助。
我对插件的尝试:(不工作)
(function ($) {
$.fn.slidr = function (opts) {
var def = {
imgs : 4,
sid : 'slidr'
},
opts = $.extend({}, def, opts);
var nxt = 2;
this.each(function () {
var nxt += 1;
if (nxt > opts.imgs) {
nxt = 1;
}
$('.'+ opts.sid + ' ul li:nth-child(n)').animate({opacity:0});
$('.'+ opts.sid + ' ul li:nth-child(' + (nxt) + ')').animate({opacity:1});
});
return this;
}
})(jQuery);
$(document).ready(function() {
setInterval( $('#content').slidr(), 2000);
});
原始片段: http: //jsfiddle.net/8T7nX 插件尝试不起作用:http: //jsfiddle.net/8T7nX/1