jQuery幻灯片放映代码不起作用

我正在尝试使用jQuery为以下标记制作幻灯片，如下所示：
我希望在我单击的任何图像缩略图周围显示边框（为样式表中的.active css指定）。单击时，还应在上方显示a预览（用于#previewImg）。

我不知道为什么我的jQuery代码不起作用：

<script>
    /*Begin Photo Gallery Code*/
    var images = ['gallery/autumn1.jpg', 'gallery/autumn2.jpg', 'gallery/autumn3.jpg'];

    function loadImage(src) {
        $('#previewImg').fadeOut('slow', function() {
            $(this).html('<img src="' + src + '" />').fadeIn('slow');

        });
    }

    function goNext() {
        var next = $('.gallerythumb>img.active').next();
        if (next.length == 0)
            next = $('.gallerythumb img:first');

        $('.gallerythumb').removeClass('active');
        next.addClass('active');
        loadImage(next.attr('src'));
    }

    $(function() {
        for (var i = 0; i < images.length; i++) {
            $('#previewImg').append('<img src="gallery/' + images[i] + '" />');

        }


        $('.gallerythumb img').click(function() {
            $('.gallerythumb img').removeClass('active');

            loadImage($(this).attr('src'));
            $(this).addClass('active');
        });

        loadImage('gallery/' + images[0]);
        $('.gallerythumb img:first').addClass('active');

        setInterval(goNext, 4000);
    });
</script>

/*开始照片库代码*/
var images=['gallery/autumn1.jpg'，'gallery/autumn2.jpg'，'gallery/autumn3.jpg']；
函数loadImage（src）{
$（'#previewImg'）.fadeOut（'slow'，function（）{
$（this.html（“”）.fadeIn（'slow'）；
});
}
函数goNext（）{
var next=$（'.gallerythumb>img.active'）.next（）；
如果（next.length==0）
next=$（'.gallerythumb img:first'）；
$（'.gallerythumb'）.removeClass（'active'）；
next.addClass（'active'）；
loadImage（next.attr（'src'））；
}
$（函数（）{
对于（var i=0；i

除了破坏我的布局外，这还会加载#previewImg中的第一个图像，当我单击其中一个图像（.gallerythumb>img）时，#previewImg不会更改为当前单击的图像。此外，在4000毫秒间隔之间自动交换图像也不起作用。

---

任何提示都将不胜感激。我必须很快交付这个项目：（

不要在HTML中使用哈希。“id=“#previewImg”应该是“id=”previewImg”。另外，id为“gallery”的元素在哪里被“$”（“#gallery>img.current”）引用？我也没有看到您将类“current”分配给元素

---

我建议仔细地逐行检查您的代码。

我在SO上找到了一段有用的代码。然后我按如下方式更改了代码，它成功了。最后，我制作了幻灯片，可以在缩略图图像之间自动切换，一次预览一个。此外，单击每个缩略图时，它都会得到一个边框，并显示在上方（预览）：

$（'a#tazeha'）。在（“单击”，函数（e）{
e、 预防默认值（）；
$（'#row1 content'）.load（this.href）；
});
$（'a#montakhab'）。在（“单击”，函数（e）{
e、 预防默认值（）；
$（'#row1 content'）.load（this.href）；
});
var imgs=[
“画廊/秋天1.jpg”，
“画廊/秋季2.jpg”，
"gallery/autumn3.jpg",；
var cnt=imgs.长度；
$（函数（）{
设置间隔（滑块，4000）；
});
函数滑块（）{
$（'#previewImg'）。淡出（“慢”，函数（）{
$（this.attr（'src'，imgs[（imgs.length++）%cnt]）.fadeIn（“slow”）；
if（imgs.length++%cnt==2）$（'.gallerythumb>img'）.removeClass（'active'）；
$（'.gallerythumb>img'）。单击（函数（）{
$（this.addClass（'active'）；
$（'#previewImg'）.attr（'src'，$（this.attr（'src'））；
}
);
});
} 

.active{
    border:2px #000 solid;
}

<script>
    /*Begin Photo Gallery Code*/
    var images = ['gallery/autumn1.jpg', 'gallery/autumn2.jpg', 'gallery/autumn3.jpg'];

    function loadImage(src) {
        $('#previewImg').fadeOut('slow', function() {
            $(this).html('<img src="' + src + '" />').fadeIn('slow');

        });
    }

    function goNext() {
        var next = $('.gallerythumb>img.active').next();
        if (next.length == 0)
            next = $('.gallerythumb img:first');

        $('.gallerythumb').removeClass('active');
        next.addClass('active');
        loadImage(next.attr('src'));
    }

    $(function() {
        for (var i = 0; i < images.length; i++) {
            $('#previewImg').append('<img src="gallery/' + images[i] + '" />');

        }


        $('.gallerythumb img').click(function() {
            $('.gallerythumb img').removeClass('active');

            loadImage($(this).attr('src'));
            $(this).addClass('active');
        });

        loadImage('gallery/' + images[0]);
        $('.gallerythumb img:first').addClass('active');

        setInterval(goNext, 4000);
    });
</script>

<script>
                    $('a#tazeha').on("click",function(e){
                        e.preventDefault();
                        $('#row1-content').load(this.href);

                    });
                    $('a#montakhab').on("click",function(e){
                        e.preventDefault();
                        $('#row1-content').load(this.href);

                    });

                </script>


            </div>
        </div>
        <div id="row1-center"></div>
        <div id="row1-left">
        <script>
        var imgs = [
        'gallery/autumn1.jpg',
        'gallery/autumn2.jpg',
        'gallery/autumn3.jpg'];
        var cnt = imgs.length;

        $(function() {
      setInterval(Slider, 4000);

    });

    function Slider() {
    $('#previewImg').fadeOut("slow", function() {
       $(this).attr('src', imgs[(imgs.length++) % cnt]).fadeIn("slow");
       if(imgs.length++ % cnt==2) $('.gallerythumb>img').removeClass('active');

       $('.gallerythumb>img').click(function(){
        $(this).addClass('active');
        $('#previewImg').attr('src',$(this).attr('src'));
        }
        );


    });
    } 



        </script>