如何將幻燈片效果更改爲淡入淡出效果？代碼是低於

-1

我有這個代碼與幻燈片效果，我想要一個效果，例如http://ledlumen.at 哪個和哪裏我必須改變，可以工作？如何將幻燈片效果更改爲淡入淡出效果？代碼是低於

在此先感謝！ +++++++++++++++++++++++++++++++++++++++++++++++++

jQuery(document).ready(function($) {  

     //Set Default State of each portfolio piece 
     $(".paging").show(); 
     $(".paging a:first").addClass("active"); 

     //Get size of images, how many there are, then determin the size of the image reel. 
     var imageWidth = $(".window").width(); 
     var imageSum = $(".image_reel img").size(); 
     var imageReelWidth = imageWidth * imageSum; 

     //Adjust the image reel to its new size 
     $(".image_reel").css({'width' : imageReelWidth}); 

     //Paging + Slider Function 
     rotate = function(){  
      var triggerID = $active.attr("rel") - 1; //Get number of times to slide 
      var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide 

      $(".paging a").removeClass('active'); //Remove all active class 
      $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) 

      $(".desc").stop(true,true).slideUp('slow'); 

      $(".desc").eq($('.paging a.active').attr("rel") - 1).slideDown("slow"); 

      //Slider Animation 
      $(".image_reel").animate({ 
       left: -image_reelPosition 
      }, 1200); 
     }; 

     //Rotation + Timing Event 
     rotateSwitch = function(){ 
     $(".desc").eq($('.paging a.active').attr("rel") - 1).slideDown("slow"); 
      play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds 
       $active = $('.paging a.active').next(); 
       if ($active.length === 0) { //If paging reaches the end... 
        $active = $('.paging a:first'); //go back to first 
       } 
       rotate(); //Trigger the paging and slider function 
      }, 10000); //Timer speed in milliseconds (3 seconds)  

     }; 

     rotateSwitch(); //Run function on launch 

    //On Click 
     $(".paging a").click(function() {  
      $active = $(this); //Activate the clicked paging 
      //Reset Timer 
      clearInterval(play); //Stop the rotation 
      rotate(); //Trigger rotation immediately 
      rotateSwitch(); // Resume rotation 
      return false; //Prevent browser jump to link anchor 
     }); 
});

來源

2013-05-31 rupakkumar

只是fadeIn和slideUp與fadeOut取代slideDown。

你也必須改變這一點：

$(".image_reel").animate({ 
    left: -image_reelPosition 
}, 1200);

改變它是這樣的：

$(".image_reel").fadeOut(500, function() { 
    $(this).css('left', -image_reelPosition+'px'); 
    $(".image_reel").fadeIn(500); 
});

來源

2013-05-31 08:41:05 kelunik

感謝兄弟，我做到了，但並沒有改變。我仍然有滑動效果。 – rupakkumar

看看我更新的答案。 – kelunik

感謝兄弟。它有效，但我有4張照片。它開始消失，但圖片沒有改變。它掛在圖片一。沒有更多的變化。任何方式感謝和希望你會找到我的進一步解決方案。在JS中我很新，我不會破壞代碼。 – rupakkumar

fadeIn()和fadeOut()可能是你的新朋友。當替換slideUp和slideDown時，嘗試使用它。

來源

2013-05-31 08:41:57

感謝兄弟，我做到了，但在這裏依然如此。 – rupakkumar

如何將幻燈片效果更改爲淡入淡出效果？代碼是低於

回答

相關問題