2012-02-25 7 views
0

mootoolsでスライドショーを作成しようとしていて、遅延機能を使ってスライドショーに定期的な効果を加えようとしましたが、動作しませんでした。だから、私はタイマー機能を作ることを計画しているが、それを行う方法は考えていない。ここ は私がこのMooToolsのダイバースクローラーを適応してきた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()'で作成されます。 –

+0

'setInterval'または' setTimeout'を使うjavascript関数はすべてのフレームワークで動作します – mgraph

答えて

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

を推測私はdone..i少し厄介を持っているものです。現時点では、ボタンをクリックして左から右に移動する必要があります。私は、誰かが私が自動スクロールを入れるのを助けることができるかどうか疑問に思いましたか?このLink ...

チェックはまた、このコードを参照してください...

HERESに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); 
} 
} 
} 
関連する問題