jQuery 幻灯片代码不起作用

Question

我正在尝试使用 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 毫秒间隔之间的图像自动交换不起作用。
任何提示将不胜感激。我必须尽快交付这个元素:(

Answer 1

不要在 HTML 中使用哈希。 'id="#previewImg' 应该是 'id="previewImg'。此外，'$('#gallery>img.current')' 引用的 ID 为 'gallery' 的元素在哪里？我也没有看到您将“当前”类分配给元素。

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