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

标签 jquery html css

我正在尝试使用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')'引用?我也看不到您将“当前”类分配给元素。

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

关于jquery - jQuery幻灯片代码不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26449794/

相关文章:

javascript - 事件监听器无法正常运行,无法在chrome上运行,也无法在Firefox上运行

javascript - 在浏览器中创建 "inspect element"功能

javascript - 如果一个元素显示 : none; in a media query are they loaded in still?

javascript - 单击处理程序未在附加项目上触发

jquery - onRendered怪异的滚动行为

javascript - 设置元素事件的名称

html - 为什么 "overflow-y:hidden"会影响 x 轴上溢出元素的可见性?

jQuery .show() 一个 flexbox

javascript - 如何仅显示来自 HTML 的图像

html - 定位 HTML SELECT 的下拉窗口