Question

我已经创建了一个非常简单的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();

Answer 1

您的slideTo函数位于全局范围内，因此正在更改。要解决此问题，只需添加var

即可

var slideTo = function (idx) {

多个jQuery幻灯片实例

1 个答案: