1. 首頁
  2. 問答
  3. 如何在幻燈片中替換幻燈片效果淡出/淡入效果？

如何在幻燈片中替換幻燈片效果淡出/淡入效果？

2009-08-31 103 views
0

我需要更換幻燈片效果到淡出/淡入效果在上一個和下一個幻燈片功能：如何在幻燈片中替換幻燈片效果淡出/淡入效果？

function animate(dir,clicked){ 
    u = true; 
    switch(dir){ 
     case 'next': 
      t = t+1; 
      m = (-(t*w-w)); 
      current(t); 
      if(o.autoHeight){autoHeight(t);} 
      if(s<3){ 
        if (t===3){$(o.slides,obj).children(':eq(0)').css({left:(s*w)});} 
        if (t===2){$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(w)});} 
      } 
      $(o.slides,obj).animate({left: m}, o.slidespeed,function(){ 
        if (t===s+1) { 
          t = 1; 
          $(o.slides,obj).css({left:0},function(){$(o.slides,obj).animate({left:m})}); 
          $(o.slides,obj).children(':eq(0)').css({left: 0}); 
          $(o.slides,obj).children(':eq('+(s-1)+')').css({ position:'absolute',left:-w}); 
        } 
        if (t===s) $(o.slides,obj).children(':eq(0)').css({left:(s*w)}); 
        if (t===s-1) $(o.slides,obj).children(':eq('+(s-1)+')').css({left:s*w-w}); 
        u = false; 
      }); 
      break; 
     case 'prev': 
      t = t-1; 
      m = (-(t*w-w)); 
      current(t); 
      if(o.autoHeight){autoHeight(t);} 
      if (s<3){ 
        if(t===0){$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(-w)});} 
        if(t===1){$(o.slides,obj).children(':eq(0)').css({position:'absolute',left:0});} 
      } 
      $(o.slides,obj).animate({left: m}, o.slidespeed,function(){ 
        if (t===0) { 
          t = s; 
          $(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(s*w-w)}); 
          $(o.slides,obj).css({left: -(s*w-w)}); 
          $(o.slides,obj).children(':eq(0)').css({left:(s*w)}); 
        } 
        if (t===2) $(o.slides,obj).children(':eq(0)').css({position:'absolute',left:0}); 
        if (t===1) $(o.slides,obj).children(':eq('+ (s-1) +')').css({position:'absolute',left:-w}); 
        u = false; 
      }); 
      break; 
     case 'fade': 
      t = [t]*1; 
      m = (-(t*w-w)); 
      current(t); 
      if(o.autoHeight){autoHeight(t);} 
      $(o.slides,obj).children().fadeOut(o.fadespeed, function(){ 
        $(o.slides,obj).css({left: m}); 
        $(o.slides,obj).children(':eq('+(s-1)+')').css({left:s*w-w}); 
        $(o.slides,obj).children(':eq(0)').css({left:0}); 
        if(t===s){$(o.slides,obj).children(':eq(0)').css({left:(s*w)});} 
        if(t===1){$(o.slides,obj).children(':eq('+(s-1)+')').css({ position:'absolute',left:-w});} 
        $(o.slides,obj).children().fadeIn(o.fadespeed); 
        u = false; 
      }); 
      break; 
     default: 
      break; 
    } 
};

我試過，但自動重啓沒不行！

您可以查看文檔並下載帶有例子的完整代碼在這個環節： http://github.com/nathansearles/loopedSlider/tree/master

請幫幫我！（對不起，我的英語很爛！）

來源

2009-08-31 LDam

回答

2

1）我介紹了一個變量來跟蹤離開容器中，我們展示的東西：

//these are default options just declare our variable below these 
var n = 0; 
var interval=0; 
var restart=0; 
var cLeft = $(o.container).position().left+'px';//Left of Container

2）未來修改側switch聲明prev和next功能：

function animate(dir,clicked){ 
    u = true; 
    switch(dir){ 
    case 'next': 
     t = t+1; 
     m = (-(t*w-w)); 
     current(t); 
     if(o.autoHeight){autoHeight(t);} 

     var pre=0; 
     if(t===s+1){t = 1; } 
     if(t===1){ pre=s; } 
     else{ pre = t-1; } 
     $(o.slides,obj).children(':eq(' + (pre-1) + ')') 
      .css({position:'absolute',left:cLeft,'z-index':'1'}) 
      .fadeOut('slow'); 
     $(o.slides,obj).children(':eq(' + (t-1) + ')') 
      .css({position:'absolute',left:cLeft,'z-index':'500'}) 
      .fadeIn('slow'); 
     u = false; 
     break; 
    case 'prev': 
     t = t-1; 
     m = (-(t*w-w)); 
     current(t); 
     if(o.autoHeight){autoHeight(t);} 

     var pre=1; 
     if(t===0){ t = s; } 
     else{ pre = t+1; } 
     $(o.slides,obj).children(':eq(' + (pre-1) + ')') 
       .css({position:'absolute',left:cLeft,'z-index':'1'}) 
       .fadeOut('slow'); //FADEOUT CURRENT IMAGE 
     $(o.slides,obj).children(':eq(' + (t-1) + ')') 
       .css({position:'absolute',left:cLeft,'z-index':'500'}) 
       .fadeIn('slow');//FADEIN NEXT ONE 
     u = false; 
     break; 
     //.... 
     //....rest of the stuff which you can modify like this

來源

2009-08-31 21:08:18 TheVillageIdiot

+0

淡入和淡出在第一次迭代後工作。你從1移動到4，然後它開始工作。我正在修復它 – TheVillageIdiot

+0

我修改了一下，現在使用autoStart也請讓我在哪裏可以給你發送腳本和測試頁面（實際上測試頁面是來自github的樣本）？ – TheVillageIdiot

+0

我已經通過電子郵件在您的地址發送了代碼。如你所見，example-3頁面也在運行！ – TheVillageIdiot

2

我還沒有測試過這個，但我所做的只是用.fadeOut函數替換.animate函數。

function animate(dir,clicked){ 
       u = true;  
       switch(dir){ 
         case 'next': 
           t = t+1; 
           m = (-(t*w-w)); 
           current(t); 
           if(o.autoHeight){autoHeight(t);} 
           if(s<3){ 
             if (t===3){$(o.slides,obj).children(':eq(0)').css({left:(s*w)});} 
             if (t===2){$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(w)});} 
           } 
           $(o.slides,obj).fadeOut(o.fadespeed ,function(){ 
             if (t===s+1) { 
               t = 1; 
               $(o.slides,obj).css({left:0},function(){$(o.slides,obj).animate({left:m})});              
               $(o.slides,obj).children(':eq(0)').css({left: 0}); 
               $(o.slides,obj).children(':eq('+(s-1)+')').css({ position:'absolute',left:-w});       
             } 
             if (t===s) $(o.slides,obj).children(':eq(0)').css({left:(s*w)}); 
             if (t===s-1) $(o.slides,obj).children(':eq('+(s-1)+')').css({left:s*w-w}); 
             u = false; 
           });          
           break; 
         case 'prev': 
           t = t-1; 
           m = (-(t*w-w)); 
           current(t); 
           if(o.autoHeight){autoHeight(t);} 
           if (s<3){ 
             if(t===0){$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(-w)});} 
             if(t===1){$(o.slides,obj).children(':eq(0)').css({position:'absolute',left:0});} 
           } 
           $(o.slides,obj).fadeOut(o.fadespeed ,function(){ 
             if (t===0) { 
               t = s; 
               $(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(s*w-w)}); 
               $(o.slides,obj).css({left: -(s*w-w)}); 
               $(o.slides,obj).children(':eq(0)').css({left:(s*w)}); 
             } 
             if (t===2) $(o.slides,obj).children(':eq(0)').css({position:'absolute',left:0}); 
             if (t===1) $(o.slides,obj).children(':eq('+ (s-1) +')').css({position:'absolute',left:-w}); 
             u = false; 
           }); 
           break; 
         case 'fade': 
           t = [t]*1; 
           m = (-(t*w-w)); 
           current(t); 
           if(o.autoHeight){autoHeight(t);} 
           $(o.slides,obj).children().fadeOut(o.fadespeed, function(){ 
             $(o.slides,obj).css({left: m}); 
             $(o.slides,obj).children(':eq('+(s-1)+')').css({left:s*w-w}); 
             $(o.slides,obj).children(':eq(0)').css({left:0}); 
             if(t===s){$(o.slides,obj).children(':eq(0)').css({left:(s*w)});} 
             if(t===1){$(o.slides,obj).children(':eq('+(s-1)+')').css({ position:'absolute',left:-w});} 
             $(o.slides,obj).children().fadeIn(o.fadespeed); 
             u = false; 
           }); 
           break; 
         default: 
           break; 
         }

來源

2009-08-31 19:45:17 Levi

2

這很容易編輯。

function animate(dir, clicked) { 
    u = true; 
    switch (dir) { 
     case 'next': 
      animate('fade', t);       
      t = t + 1; 
      m = (-(t * w - w)); 
      current(t); 
      if (t === s) { t = 0; } 

      /* -- don't used this script 
      //-- none slide last image is map      
      if (o.autoHeight) { autoHeight(t); } 
      $(o.slides, obj).animate({ left: m }, o.slidespeed, function() { 
       if ((t === s + 1)) { 
        t = 1; 
        $(o.slides, obj).css({ left: 0 }, function() { $(o.slides, obj).animate({ left: m }) }); 
        $(o.slides, obj).children(':eq(0)').css({ left: 0 }); 
        $(o.slides, obj).children(':eq(' + (s - 1) + ')').css({ position: 'absolute', left: -w }); 
       } 
       if (t === s) $(o.slides, obj).children(':eq(0)').css({ left: (s * w) }); 
       if (t === s - 1)//$(o.slides, obj).children(':eq(0)').css({ left: (s * w) }); 
       { 
        $(o.slides, obj).children(':eq(' + (s - 1) + ')').css({ left: s * w - w }); 
       } 
       u = false; 
      });       
      */ 
      break; 
     case 'prev': 
      animate('fade', t); 
      t = t - 1; 
      m = (-(t * w - w)); 
      current(t); 

      /* -- don't used this script 
      if (o.autoHeight) { autoHeight(t); } 
      $(o.slides, obj).animate({ left: m }, o.slidespeed, function() { 
       if (t === 0) { 
        t = s; 
        $(o.slides, obj).children(':eq(' + (s - 1) + ')').css({ position: 'absolute', left: (s * w - w) }); 
        $(o.slides, obj).css({ left: -(s * w - w) }); 
        $(o.slides, obj).children(':eq(0)').css({ left: (s * w) }); 
       } 
       if (t === 2) $(o.slides, obj).children(':eq(0)').css({ position: 'absolute', left: 0 }); 
       if (t === 1) $(o.slides, obj).children(':eq(' + (s - 1) + ')').css({ position: 'absolute', left: -w }); 
       u = false; 
      }); 
      */ 
      break; 
     case 'fade': 
      t = [t] * 1; 
      m = (-(t * w - w)); 
      current(t); 
      if (o.autoHeight) { autoHeight(t); } 
      $(o.slides, obj).children().fadeOut(o.fadespeed, function() { 
       $(o.slides, obj).css({ left: m }); 
       $(o.slides, obj).children(':eq(' + (s - 1) + ')').css({ left: s * w - w }); 
       $(o.slides, obj).children(':eq(0)').css({ left: 0 }); 
       if (t === s) { $(o.slides, obj).children(':eq(0)').css({ left: (s * w) }); } 
       if (t === 1) { $(o.slides, obj).children(':eq(' + (s - 1) + ')').css({ position: 'absolute', left: -w }); } 
       $(o.slides, obj).children().fadeIn(o.fadespeed); 
       u = false; 
      }); 
      break; 
     default: 
      break; 
    } 
};

來源

2009-11-27 14:24:26 gigga

1

我用下面的代碼，這似乎爲我工作：

 case "next": 
      times = times+1; 
      distance = (-(times*width-width)); 
      current(times); 
      if(o.autoHeight){autoHeight(times);} 
      $(o.slides,$t).children().fadeOut(o.fadespeed, function(){ 
       $(o.slides,$t).css({left: distance}); 
       $(o.slides,$t).children(":eq("+(slides-1)+")").css({left:slides*width-width}); 
       $(o.slides,$t).children(":eq(0)").css({left:0}); 
       if(times===slides+1){ 
       times = 1; 
       distance = (-(times*width-width)); 
       current(times); 
       } 
       if(times===slides) 
       {$(o.slides,$t).children(":eq(0)").css({left:(slides*width)});} 
       if(times===slides-1) 
       {$(o.slides,$t).children(":eq("+(slides-1)+")").css({ position:"absolute",left:-width});} 
       $(o.slides,$t).children().fadeIn(o.fadespeed); 
       active = false;; 
       }); 
       break;

我希望這可以幫助別人:)

來源

2010-06-29 17:39:45 heathwaller

1

這裏是我的版本代碼。這會將默認幻燈片效果更改爲淡入/淡出效果。我正在使用loopedSlider 0.5.5 - jQuery插件。自動啓動功能也很完美。您會注意到下面有重複的代碼行。你可以自己輕鬆解決這個問題。

function animate(dir,clicked){ 
     active = true; 
     switch(dir){ 
      case "next": 
       if(times>slides-1){ times = 0; } 
       times = times+1; 
       distance = (-(times*width-width)); 
       current(times); 
       if(o.autoHeight){autoHeight(times);} 
       $(o.slides,obj).children().fadeOut(o.fadespeed, function(){ 
        $(o.slides,obj).css({left: distance}); 
        $(o.slides,obj).children(":eq("+(slides-1)+")").css({left:slides*width-width}); 
        $(o.slides,obj).children(":eq(0)").css({left:0}); 
        if(times===slides){$(o.slides,obj).children(":eq(0)").css({left:(slides*width)});} 
        if(times===1){$(o.slides,obj).children(":eq("+(slides-1)+")").css({ position:"absolute",left:-width});} 
        $(o.slides,obj).children().fadeIn(o.fadespeed); 
        active = false; 
       }); 
       break; 

      case "prev": 
       if(times==1){ times = slides+1; } 
       times = times-1; 
       distance = (-(times*width-width)); 
       current(times); 
       if(o.autoHeight){autoHeight(times);} 
       $(o.slides,obj).children().fadeOut(o.fadespeed, function(){ 
        $(o.slides,obj).css({left: distance}); 
        $(o.slides,obj).children(":eq("+(slides-1)+")").css({left:slides*width-width}); 
        $(o.slides,obj).children(":eq(0)").css({left:0}); 
        if(times===slides){$(o.slides,obj).children(":eq(0)").css({left:(slides*width)});} 
        if(times===1){$(o.slides,obj).children(":eq("+(slides-1)+")").css({ position:"absolute",left:-width});} 
        $(o.slides,obj).children().fadeIn(o.fadespeed); 
        active = false; 
       }); 
       break; 

      case "fade": 
       times = [times]*1; 
       distance = (-(times*width-width)); 
       current(times); 
       if(o.autoHeight){autoHeight(times);} 
       $(o.slides,obj).children().fadeOut(o.fadespeed, function(){ 
        $(o.slides,obj).css({left: distance}); 
        $(o.slides,obj).children(":eq("+(slides-1)+")").css({left:slides*width-width}); 
        $(o.slides,obj).children(":eq(0)").css({left:0}); 
        if(times===slides){$(o.slides,obj).children(":eq(0)").css({left:(slides*width)});} 
        if(times===1){$(o.slides,obj).children(":eq("+(slides-1)+")").css({ position:"absolute",left:-width});} 
        $(o.slides,obj).children().fadeIn(o.fadespeed); 
        active = false; 
       }); 
       break; 

      default: 
       break; 
      } 
     }; 
    });

請讓我知道這是否有助於解決您的問題。

來源

2011-07-25 17:19:33 jUnkEEpEr

相關問題

 相關問題