<li><a data-slidetarget="' + (index + 1) + '" href="#"></li>
以下是滑块上使用的完整代码:
(function($) {
$.fn.shaliSlider = function(options) {
if (!this.length) { return this; }
var opts = $.extend(true, {}, $.fn.shaliSlider.defaults, options);
this.each(function() {
var $this = $(this),
$itemContainer = $this.find(opts.itemContainer),
$items = $itemContainer.find(opts.item),
$previous = $this.find(opts.previousButton),
$next = $this.find(opts.nextButton),
slideWidth = $items.first().width(),
total = $items.length,
current = 1,
waitTime = opts.waitTime,
userWaitMultiplier = 1.5,
$paginationList,
timer;
if (opts.usePagination) {
$paginationList = $("<ul>", {
id: opts.paginationId,
"class": opts.paginationClass
});
$items.each(function(index) {
$paginationList.append('<li><a data-slidetarget="' + (index + 1) + '" href="#"></li>');
});
$paginationList.delegate('a', 'click', function(event) {
var $this = $(this),
slideTarget = parseInt($this.data("slidetarget"), 10);
changeSlide(slideTarget);
event.preventDefault();
});
$this.append($paginationList);
}
function timerTrigger() {
changeSlide(current + 1, true);
}
function changeSlide(slide, fromTimer) {
if (slide === total + 1) {
current = 1;
} else if (slide === 0) {
current = total;
} else {
current = slide;
}
$itemContainer.stop(true, true).animate({
marginLeft: -((current - 1) * slideWidth)
}, "slow", opts.usePagination ? function(){
$paginationList.children()
.removeClass(opts.paginationActiveClass)
.eq(current-1)
.addClass(opts.paginationActiveClass);
} : $.noop);
clearTimeout(timer);
// if slide change was caused by a user interaction then delay the
// timer to give the user additional time on their chosen slide
timer = setTimeout(timerTrigger, fromTimer ? waitTime : waitTime * userWaitMultiplier);
}
if (opts.useNextPrev) {
$previous.click(function (event) {
changeSlide(current + 1);
return false;
});
$next.click(function (event) {
changeSlide(current - 1);
return false;
});
} else {
$previous.add($next).hide();
}
timer = setTimeout(timerTrigger, waitTime);
});
return this;
};
// default options
$.fn.shaliSlider.defaults = {
itemContainer: ".item-container",
item: ".item",
nextButton: ".back",
previousButton: ".fwd",
paginationClass: "pagination",
paginationId: "paginationId",
paginationActiveClass: "active",
usePagination: false,
useNextPrev: true,
waitTime: 5000
};
})(jQuery);