Question

我想制作自己的jQuery插件，比如jCarousel。它可以工作，但问题是当我离开页面并在Chrome中停留大约40秒和在Firefox中停留1-2分钟时它会让所有人看到它。它在Opera中运行良好。我使用var e作为当前图像，并在插件必须隐藏图像的时刻控制它。当我离开页面时，请获取attr style =“opacity：0”（必须用于fadeIn）。插件在我的托管上，这是链接：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'点击更改图片。

等待回答。 thx。

Answer 1

如果您希望默认隐藏图像，请使用CSS执行此操作，然后使用您的插件显示它们。否则，你得到一点＆＃34;闪烁＆＃34;在解析JavaScript的过程中。

Answer 2

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

jquery幻灯片插件制作和测试

2 个答案: