jquery - jQuery幻灯片代码不起作用

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

<div id="gallerypreview">
    <img id="#previewImg" alt="preview for image" src="gallery/autumn1.jpg" />
</div>
<div id="gallerythumbs">

    <div class="gallerythumb">
        <img src="gallery/autumn1.jpg">
    </div>
    <div class="gallerythumb">
        <img src="gallery/autumn2.jpg">
    </div>
    <div class="gallerythumb">
        <img src="gallery/autumn3.jpg">

    </div>
</div>

.active的CSS：

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

我不知道为什么我的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>

除了破坏我的布局之外，这还会在#previewImg中加载第一个图像，并且当我单击任一图像时（.gallerythumb> img），＃previewImg不会更改为当前单击的图像。同样，在4000毫秒间隔之间自动交换图像无效。

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

最佳答案

不要在HTML中使用哈希。 'id =“＃previewImg'应该为'id =” previewImg'。另外，标识为'gallery'的元素在何处由'$（'＃gallery> img.current'）'引用？我也看不到您将“当前”类分配给元素。

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