多个jQuery幻灯片实例

Multiple jQuery slideshow instances

本文关键字:实例 幻灯片 jQuery 多个      更新时间:2023-09-26

我创建了一个非常简单的jQuery幻灯片,但在页面上有两个时遇到了问题。我以为通过在本地定义所有变量,问题就会得到解决,但我似乎找不到解决方案。

目前,第二个实例正常工作,但第一个实例不正常。它要么激活第二个,要么什么都不做。

JSFiddle:http://jsfiddle.net/3pkujpur/1/

HTML:

<div class="slideshow">
    <div class="navigator">
        <a class="prev">Prev</a>
        <a class="next">Next</a>
    </div>
    <ul class="slider">
        <li class="active">
            <h2>Slider 1 Slide 1</h2>
        </li>
        <li>
            <h2>Slider 1 Slide 2</h2>
        </li>
        <li>
            <h2>Slider 1 Slide 3</h2>
        </li>
    </ul>
</div>
<div class="slideshow">
    <div class="navigator">
        <a class="prev">Prev</a>
        <a class="next">Next</a>
    </div>
    <ul class="slider">
        <li class="active">
            <h2>Slider 2 Slide 1</h2>
        </li>
        <li>
            <h2>Slider 2 Slide 2</h2>
        </li>
        <li>
            <h2>Slider 2 Slide 3</h2>
        </li>
    </ul>
</div>

jQuery:

(function($) {
    $.fn.slideShow = function() {
        return this.each(function() {
            var $this = jQuery(this);
            var $slider = $this.find('.slider');
            var $slides = $slider.children();
            var length = $slides.size();
            var $navigator = $this.find('.navigator');
            var $trigger = $navigator.children();
            var $prev = $trigger.filter('.prev');
            var index = 0;
            slideTo = function (idx) {
                $slides
                    .removeClass('active')
                    .eq(idx)
                    .queue(function(next){
                        jQuery(this).addClass('active');
                        next();
                    });
                index = idx;
            };
            $trigger.click( function () {
                var idx = $slides.filter('.active').index(),
                    prevIdx = idx - 1 < 0 ? length - 1 : index - 1;
                    nextIdx = idx + 1 < length ? index + 1 : 0;
                slideTo(jQuery(this)[0] === $prev[0] ? prevIdx : nextIdx);
            });
        });
    };
})(jQuery);
jQuery('.slideshow').slideShow();

您的slideTo函数在全局范围内,因此正在进行更改。要修复它,只需添加var

var slideTo = function (idx) {