Javascript 多个jQuery幻灯片演示实例

我已经创建了一个非常简单的jQuery幻灯片，但是当页面上出现两个时，我遇到了一些问题。我认为，通过在本地定义所有变量，问题将得到解决，但我似乎找不到解决方案

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

JSFiddle：

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>

上
下一个


滑块1滑块1


滑块1滑块2


滑块1滑块3


上
下一个


滑块2滑块1


滑块2滑块2


滑块2滑块3

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

（函数（$）{
$.fn.slideShow=函数（）{
返回此值。每个（函数（）{
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指数=0；
slideTo=函数（idx）{
$slides
.removeClass（'活动'）
.eq（idx）
.queue（函数（下一个）{
jQuery（this.addClass（'active'）；
next（）；
});
指数=idx；
};
$trigger.click（函数（）{
var idx=$slides.filter（'.active'）.index（），
prevIdx=idx-1<0？长度-1：指数-1；
nextIdx=idx+1

您的

滑动到

功能在全局范围内，因此正在对其进行更改。要修复它，只需添加

var

var slideTo = function (idx) {