jquery slideshowプラグインの作成とテスト

Question

jCarouselのような独自のjQueryプラグインを作成します。 それはうまくいきますが、私はページを離れて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」を使用します。

お待ちください。どうも 。

Answer 1

最後に、jqueryライブラリの新しいバージョンをダウンロードした後に動作します。

Answer 2

イメージをデフォルトで非表示にする場合は、CSSで表示し、次にプラグインを使用して表示します。それ以外の場合は、JavaScriptが解析されるまでに「ちらつき」が発生します。