Question

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

<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＆gt; img）时，＃prepImg不会更改为当前点击的图像。此外，在4000毫秒间隔之间自动交换图像不起作用。
任何提示将不胜感激。我必须很快交付这个项目:(

Answer 1

不要在HTML中使用哈希。＆＃39; ID =＆＃34;＃previewImg＆＃39;应该是＆＃39; id =＆＃34; previewImg＆＃39;。此外，具有id＆＃39; gallery＆＃39;的元素在哪里？引用＆＃39; $（＆＃39;＃gallery＆gt; img.current＆＃39;）＆＃39;？我也没有看到你分配课程“当前＆＃39;一个元素。

我建议您对代码进行仔细的逐行审核。

Answer 2

我在SO post上找到了一段有用的代码。然后我改变了代码如下，它工作。最后，我有幻灯片，可以自动切换一次预览一个缩略图。此外，当单击每个缩略图时，它会获得一个边框并显示在上方（预览）：

<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>

jQuery幻灯片代码不起作用

2 个答案: