2012-02-25 173 views
0

我正在嘗試在mootools中進行幻燈片放映,並嘗試使用延遲功能在幻燈片中顯示週期性效果,但它無法正常工作。所以我打算做一個計時器功能,但不知道該怎麼做。 這裏是我所done..i有些凌亂的東西我想如何在mootools中設置計時器

function slideImages(id_new, id_old){ 
console.log($(id_new)); 
$(id_old).tween('opacity', [1,0]); 
$(id_old).setStyle('display','none'); 
$(id_old).tween('margin-left', -980); 

$(id_new).setStyle('display', 'block'); 
$(id_new).tween('opacity', [0,1]); 
$(id_new).tween('margin-left', 180); 

var c = id_new; 
var d = id_old; 

//timer = setInterval ("timerFunction()", 5000); 
(slide(c, d)).delay(5000); //this isn't working and browser is getting hanged 
} 

function slide(c, d){ 
    console.log(c); 

    if (c.split('_')[1].toInt() > 2){ 
     id_new = 'image_'+ 0 ; 
     console.log(id_new); 
    } 
    else{ 
     id_new = 'image_'+ (c.split('_')[1].toInt()+1); 
     console.log(id_new); 
    } 
    id_old = c; 
    slideImages(id_new, id_old); 
}; 
+0

你能告訴你迄今爲止做了什麼嗎?否則理解這個問題有點難。在javscript中,定時器通常使用'setTimeout()'或'setInterval()'來創建。 – 2012-02-25 08:42:56

+0

使用'setInterval'或'setTimeout'它們是javascript函數在所有framweorks – mgraph 2012-02-25 08:43:51

回答

0

有很多種方法來使用延遲或setTimeout的。在這裏他們是:

function slideImages(id_new, id_old) { 
    var c = $(id_new); 
    var d = $(id_old); 

    d.tween('opacity', [1, 0]); 
    d.setStyle('display', 'none'); 
    d.tween('margin-left', -980); 

    c.setStyle('display', 'block'); 
    c.tween('opacity', [0, 1]); 
    c.tween('margin-left', 180); 

    // your timer becomes global here, careful. crappy pattern. 
    // use a closure so it goes in the upper scope, allowing you to stop. 
    // cancel by clearTimeout(timer) 

    // pass function to delay, scope = null, arguments 
    timer = slide.delay(5000, null, [c, d]); 
    // or 
    timer = (function() { 
     slide(c, d); 
    }).delay(5000); 

    // or normal js 
    timer = setTimeout(function() { 
     slide(c, d); 
    }, 5000); 
} 

function slide(c, d) { 

    if (c.split('_')[1].toInt() > 2) { 
     id_new = 'image_' + 0; 
     console.log(id_new); 
    } 
    else { 
     id_new = 'image_' + (c.split('_')[1].toInt() + 1); 
     console.log(id_new); 
    } 
    id_old = c; 
    slideImages(id_new, id_old); 
} 
0

我已經適應了這個MooTools的潛水員滾輪。此時你必須點擊按鈕從左到右移動。我想知道是否有人可以幫我把自動滾動?

請與本Link ...

也可參考此代碼...

繼承人的js代碼

var totalImages = 3; 
var currentImage = 1; 
function workSlide(way) { 
var currentAmount=$("holder2").getStyle("margin-left"); 
var myFx = new Fx.Tween('holder2',{duration: 600}); 
if(way == "right") { 
if (currentImage <= totalImages-1) { 
currentImage++; 
var whichAmount = -(((currentImage-1)) * 920); 
myFx.start('margin-left',currentAmount,whichAmount); 
} 
} else { 
if (currentImage > 1) { 
currentImage--; 
var whichAmount = -(((currentImage-1)) * 920); 
myFx.start('margin-left',currentAmount,whichAmount); 
} 
} 
}