jquery幻灯片插件制作和测试

Question

我想制作自己的 jQuery 插件，例如 jCarousel。 它可以工作，但是当我离开页面并在 Chrome 中停留 40 秒并在 Firefox 中停留 1-2 分钟时，问题是所有 img 都可见。它在 Opera 中运行良好。 我将 var e 用于当前图像并在插件必须隐藏图像时对其进行控制台。 当我离开页面时，得到 attr style="opacity:0" （必须用于淡入淡出）。 插件在我的主机上，这是链接：changeImg 代码如下：

(function ($) {
    $.fn.changeImg = function (options) {
        var def = {
            waitla: 5000,
        };
        var o = jQuery.extend(def, options);
        return this.each(function () {
            var l = $('img', this).length;
            var i = 1;
            $('img:not(:first)', this).hide();
            $(this).prepend('<div id=changeImg-prev></div>');
            $(this).prepend('<div id=changeImg-next></div>');
            $(this).prepend('<span id=changeImg-count>' + i + '/' + l + '</span>');
            $(this).prepend('<span id=changeImg-play>STOP</span>');
            var e = $('img:first', this);
            var a = setTimeout(nextImg, o.waitla);
            var play_key = true;
            $('#changeImg-next').click(nextImg);
            $('#changeImg-prev').click(function () {
                e.hide();
                if (e.prev().is('img')) {
                    e = e.prev();
                    e.fadeIn('slow');
                    i--;
                } else {
                    $('#changeImg img:last').fadeIn('slow');
                    e = $('#changeImg img:last');
                    i = l;
                };
                $('#changeImg-count').text(i + '/' + l);
                $('#changeImg-thumbs img').css('opacity', '0.5');
                $('#changeImg-thumbs img[src*=' + i + ']').css('opacity', '1');
                if (play_key) {
                    clearTimeout(a);
                    a = setTimeout(nextImg, o.waitla);
                };
            });
            $('#changeImg-thumbs img:not(:first)').css('opacity', '0.5');
            $('#changeImg-play').click(function () {
                if (play_key) {
                    $(this).text('PLAY');
                    play_key = false;
                    clearTimeout(a);
                } else {
                    $(this).text('STOP');
                    play_key = true;
                    a = setTimeout(nextImg, o.waitla);
                };
            });
            $('#changeImg-thumbs img').hover(function () {
                if (e.attr('src') != $(this).attr('alt')) {
                    $(this).animate({
                        'opacity': '1'
                    });
                };
            },
            function () {
                if (e.attr('src') != $(this).attr('alt')) {
                    $(this).animate({
                        'opacity': '0.5'
                    });
                };
            }).click(function () {
                thumb = $(this).attr('alt');
                $('#changeImg-thumbs img').css('opacity', '0.5');
                $(this).css('opacity', '1');
                if (e.attr('src') != thumb) {
                    e.hide();
                    thumb = thumb.replace('images/', '').replace('.jpg', '');
                    e = $('#changeImg img[src*=' + thumb + ']');
                    e.fadeIn('slow');
                    i = $(this).attr('src');
                    i = i.replace('changeimg/thumb', '').replace('.jpg', '');
                };
                $('#changeImg-count').text(i + '/' + l);
                if (play_key) {
                    clearTimeout(a);
                    a = setTimeout(nextImg, o.waitla);
                };
            });


            function nextImg() {
                e.hide();
                console.log(e);
                if (e.next().is('img')) {
                    e = e.next();
                    e.fadeIn('slow');
                    i++;
                } else {
                    e = $('#changeImg img:first');
                    e.fadeIn('slow');
                    i = 1;
                };
                $('#changeImg-count').text(i + '/' + l);
                $('#changeImg-thumbs img').css({
                    'opacity': '0.5',
                });
                $('#changeImg-thumbs img[src*=' + i + ']').css('opacity', '1');
                if (play_key) {
                    clearTimeout(a);
                    a = setTimeout(nextImg, o.waitla);
                };
            };
        });
    };
})(jQuery)

我使用拇指图像的标签“alt”通过点击更改图像。

等待答复。谢谢。

Answer 1

如果您希望图像默认隐藏，请使用 CSS，然后使用您的插件显示它们。否则，在解析 JavaScript 时会出现一些“闪烁”。

Answer 2

下载新版本的jquery库后终于搞定了。