特定のカテゴリでは、どのくらい長く停止することができますか？

Question

最初のカテゴリでスライドショーを一時停止するにはどうすればよいですか？ありがとう！私はあなたにも.hover()イベントハンドラで苦労しているコードにコメントから見る

$(document).ready(function(){  

      var images = [ 
      { 
       id:0, 
       images: ['media/image0.jpg'], 
        dom: null 
      }, 
       { 
        id:1, 
       images: ['media/image1.jpg'], 
        dom: null 

       }, 
       { 
        id:2, 
       images: ['media/image2.jpg'], 
        dom: null 

       }, 
       { 
        id:3, 
        images: ['media/image3.jpg'], 
        dom: null 

       }, 
       { 
        id:4, 
            images: ['media/image4.jpg'], 
        dom: null 
       }, 
       { 
        id:5, 
             images: ['media/image5.jpg'], 
        dom: null 
       }, 
       { 
        id:6, 
             images: ['media/image6.jpg'], 
        dom: null 
       } 
      ]; 

      function preloadImages(images, func) {   
       var i = 0; 
       var cache = []; 
       var loaded = 0; 
       var num = images.length; 

       for (; i < num; i++) (function(i) { 

        var new_image = $('<img/>').attr('src', images[i]).load(function(){ 
         loaded++; 

         if(loaded == num) 
         {             
          func();     
         } 
        });      
        cache.push(new_image); 
       })(i); 

       return true; 
      }; 

      for (var i=0; i < images.length; i++) { 
       preloadImages(images[i].images, function() {}); 
      } 


      var category = 0; // the current tab group to display 
      var index = 0; // the current image in the tab group to display 
      var slider = $("#slider-container"); 
      var timer = null; 
      var speed = 1000; 

      initCategories = function() { 
       for (var i = 0; i < images.length; ++i) { 
        images[i].dom = $("<ul/>").addClass("holder"); 
        for (var j = 0; j < images[i].images.length; ++j) { 
         images[i].dom.append($("<li/>").addClass("slide").css("background", "url(" + images[i].images[j] + ") no-repeat")); 
        } 
       } 
      } 

      switchCategory = function(newCategory) { 
       //if (newCategory != category) { 
        category = newCategory; 
        $(".slideCat").removeClass("active"); 
        $(".slideCat[rel='" + category + "']").addClass("active"); 
        slider.empty().append(images[category].dom); 
       //} 
       index = 0; 
       $(".holder", slider).css("margin-left", 0); 
      } 

      switchSlide = function(newSlide, animate) { 
       //if (newSlide != index) { 
        index = newSlide; 
        var newMargin = $(".slide:first", slider).width() * -index; 
        if (animate) { 
         $(".holder", slider).animate({"margin-left": newMargin + "px"}, speed, null, null); 
        } else { 
         $(".holder", slider).css("margin-left", newMargin + "px"); 
        } 
       //} 
      } 

      doTransition = function() { 
       ++index; 
       if (index >= images[category].images.length) { 
        ++category; 
        if (category >= images.length) { 
         category = 0; 
        } 
        switchCategory(category); 
       } else { 
        switchSlide(index, true); 
       } 
      } 

      $(".slideCat").click(function (e) { 
       clearInterval(timer); 
       switchCategory(this.rel); 
       timer = setInterval(doTransition, 5000); 
       return false; 
      }); 

      $(".prev").click(function (e) { 
       clearInterval(timer); 
       --index; 
       if (index < 0) { 
        --category; 
        if (category < 0) { 
         category = images.length - 1; 
        } 
        switchCategory(category); 
        switchSlide(images[category].images.length - 1); 
       } else { 
        switchSlide(index); 
       } 
       timer = setInterval(doTransition, 5000); 
       return false; 
      }); 

      $(".next").click(function (e) { 
       clearInterval(timer); 
       ++index; 
       if (index >= images[category].images.length) { 
        ++category; 
        if (category >= images.length) { 
         category = 0; 
        } 
        switchCategory(category); 
       } else { 
        switchSlide(index, false); 
       } 
       timer = setInterval(doTransition, 15000); 
       return false; 
      }); 

      // this doesn't work! hover gets triggered like this, but we don't know which <li/> we're over. 
      // if we use e.g. $(".holder", slider) or $("li", slider), the event doesn't get triggered :(
      $(slider).hover(function() { 
       console.log("hover"); 
       clearInterval(timer); 
       $(this).find(".caption").stop().fadeTo(500, 0.8); 
      }, function() { 
       $(this).find(".caption").stop().fadeTo(500, 0); 
       timer = setInterval(doTransition, 15000); 
      }); 

      // load the categories 
      initCategories(); 
      switchCategory(0); 
      switchSlide(0, false); 
      timer = setInterval(doTransition, 15000); 
     }); 

Answer 1

。これを有効にするには、変数から'#slider-container'にslider変数を変更し、変数への呼び出しをsliderから$(slider)に応じて変更してみてください。最後に、.hover()イベントの場合は$(slider).hoverを$(slider+' li').hoverに変更してください。これにより、hoverイベントハンドラが各子リスト項目#slider-containerに添付されます。

編集：ここに希望トランジション効果を達成する方法は次のとおりです。

まず、このコードブロックで：

// load the categories 
initCategories(); 
switchCategory(0); 
switchSlide(0, false); 
timer = setInterval(doTransition, 15000); 

変更timer = setInterval(doTransition, 15000);へ：

timer = setTimeout(doTransition, 20000); 

これは、20を配置します非常に最初のイメージがロードされた後、2番目のイメージに置き換える前に2番目の遅延。

次に、setIntervalのすべてのインスタンスをsetTimeoutとclearIntervalからclearTimeoutに変更します。これは、（setTimeoutは一度だけ起こるながらsetIntervalは、無限のアクション遅延ループを開始します。）私たちは、各トランジションの長さをより詳細に制御を与える

最後に、あなたのdoTransition()機能では、switchCategory(category);後、いずれかを入力します。

timer = setTimeout(doTransition, 20000); 

...あなたはEVERYカテゴリーの最初のイメージは、20秒の遅延、またはしたい場合：

if (category == 0) 
{ 
    timer = setTimeout(doTransition, 20000); 
} 
else 
{ 
    timer = setTimeout(doTransition, 15000); 
} 

があなたのslideshで唯一の非常に最初の画像に20秒の遅延を適用するためにこんにちは。

最後に、ではなく、少なくともは、switchSlide(index, true);後、次のように入力します

timer = setTimeout(doTransition, 15000); 

を...残りの間のスライド遷移に標準15秒の遅延を適用します。それはあなたが必要とするすべてでなければなりません！