我的网站上有一个 jQuery 滑块。
我设法使滑块仅在两个导航链接之间自动移动，但是有四个导航链接。
我怎样才能使它从第一个导航链接到第四个链接按顺序移动，并具有定义的延迟。
这是底部带有导航链接的 HTML 代码：
<div id="mi-slider" class="mi-slider">
<ul>
<li><a href="#"><img src="images/1.jpg" alt="img01"><h4>Boots</h4></a></li>
<li><a href="#"><img src="images/2.jpg" alt="img02"><h4>Oxfords</h4></a></li>
<li><a href="#"><img src="images/3.jpg" alt="img03"><h4>Loafers</h4></a></li>
<li><a href="#"><img src="images/4.jpg" alt="img04"><h4>Sneakers</h4></a></li>
</ul>
<ul>
<li><a href="#"><img src="images/5.jpg" alt="img05"><h4>Belts</h4></a></li>
<li><a href="#"><img src="images/6.jpg" alt="img06"><h4>Hats & Caps</h4></a></li>
<li><a href="#"><img src="images/7.jpg" alt="img07"><h4>Sunglasses</h4></a></li>
<li><a href="#"><img src="images/8.jpg" alt="img08"><h4>Scarves</h4></a></li>
</ul>
<ul>
<li><a href="#"><img src="images/9.jpg" alt="img09"><h4>Casual</h4></a></li>
<li><a href="#"><img src="images/10.jpg" alt="img10"><h4>Luxury</h4></a></li>
<li><a href="#"><img src="images/11.jpg" alt="img11"><h4>Sport</h4></a></li>
</ul>
<ul>
<li><a href="#"><img src="images/12.jpg" alt="img12"><h4>Carry-Ons</h4></a></li>
<li><a href="#"><img src="images/13.jpg" alt="img13"><h4>Duffel Bags</h4></a></li>
<li><a href="#"><img src="images/14.jpg" alt="img14"><h4>Laptop Bags</h4></a></li>
<li><a href="#"><img src="images/15.jpg" alt="img15"><h4>Briefcases</h4></a></li>
</ul>
<nav>
<a href="#">Shoes</a>
<a href="#">Accessories</a>
<a href="#">Watches</a>
<a href="#">Bags</a>
</nav>
</div>
还有我用来在导航链接之间自动滑动的代码，但它只是在前两个导航链接之间切换：
;
setInterval(function () {
$('nav > a').trigger('click.catslider');
}, 12000);
});
jQuery.noConflict();
jQuery(document).ready(function ($) {;
(function ($, window, undefined) {
'use strict';
$.CatSlider = function (options, element) {
this.$el = $(element);
this._init(options);
};
$.CatSlider.prototype = {
_init: function (options) {
this.$categories = this.$el.children('ul');
this.$navcategories = this.$el.find('nav > a');
var animEndEventNames = {
'WebkitAnimation': 'webkitAnimationEnd',
'OAnimation': 'oAnimationEnd',
'msAnimation': 'MSAnimationEnd',
'animation': 'animationend'
};
this.animEndEventName = animEndEventNames[Modernizr.prefixed('animation')];
this.support = Modernizr.csstransforms && Modernizr.cssanimations;
this.isAnimating = false;
this.current = 0;
var $currcat = this.$categories.eq(0);
if (!this.support) {
this.$categories.hide();
$currcat.show();
} else {
$currcat.addClass('mi-current');
}
this.$navcategories.eq(0).addClass('mi-selected');
this._initEvents();
},
_initEvents: function () {
var self = this;
this.$navcategories.on('click.catslider', function () {
self.showCategory($(this).index());
return false;
});
$(window).on('resize', function () {
self.$categories.removeClass().eq(0).addClass('mi-current');
self.$navcategories.eq(self.current).removeClass('mi-selected').end().eq(0).addClass('mi-selected');
self.current = 0;
});
},
showCategory: function (catidx) {
if (catidx === this.current || this.isAnimating) {
return false;
}
this.isAnimating = true;
this.$navcategories.eq(this.current).removeClass('mi-selected').end().eq(catidx).addClass('mi-selected');
var dir = catidx > this.current ? 'right' : 'left',
toClass = dir === 'right' ? 'mi-moveToLeft' : 'mi-moveToRight',
fromClass = dir === 'right' ? 'mi-moveFromRight' : 'mi-moveFromLeft',
$currcat = this.$categories.eq(this.current),
$newcat = this.$categories.eq(catidx),
$newcatchild = $newcat.children(),
lastEnter = dir === 'right' ? $newcatchild.length - 1 : 0,
self = this;
if (this.support) {
$currcat.removeClass().addClass(toClass);
setTimeout(function () {
$newcat.removeClass().addClass(fromClass);
$newcatchild.eq(lastEnter).on(self.animEndEventName, function () {
$(this).off(self.animEndEventName);
$newcat.addClass('mi-current');
self.current = catidx;
var $this = $(this);
self.forceRedraw($this.get(0));
self.isAnimating = false;
});
}, $newcatchild.length * 90);
} else {
$currcat.hide();
$newcat.show();
this.current = catidx;
this.isAnimating = false;
}
},
forceRedraw: function (element) {
if (!element) {
return;
}
var n = document.createTextNode(' '),
position = element.style.position;
element.appendChild(n);
element.style.position = 'relative';
setTimeout(function () {
element.style.position = position;
n.parentNode.removeChild(n);
}, 25);
}
}
$.fn.catslider = function (options) {
var instance = $.data(this, 'catslider');
if (typeof options === 'string') {
var args = Array.prototype.slice.call(arguments, 1);
this.each(function () {
instance[options].apply(instance, args);
});
} else {
this.each(function () {
instance ? instance._init() : instance = $.data(this, 'catslider', new $.CatSlider(options, this));
});
}
return instance;
};
})(jQuery, window);
$(function () {
$('#mi-slider').catslider();
})
我添加了catslider的代码