Question

我正试图在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);
};

Answer 1

我已经改编了这个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);
 }
 }
 }

Answer 2

有很多种方法可以使用delay或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);
}

如何在mootools中设置计时器

2 个答案: