Javascript jQuery滑块在导航链接之间自动滑动

我的网站上有一个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>

---

我添加了catslider的代码

您的示例中缺少代码。catslider在哪里？是什么？我已经添加了您要求的代码。请帮我检查一下。该代码用于在单击导航链接时使项目从左向右移动。

;
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();
})