Question

寻找我购买的Magento模板附带的滑块的一点帮助。

我正在尝试在鼠标悬停时添加一个暂停，但是在使用JavaScript时我的手很脏。

希望推进正确的方向

以下是我正在使用的代码

function decorateSlideshow() {
var $$li = $$('#slideshow ul li');
if ($$li.length > 0) {

    // reset UL's width
    var ul = $$('#slideshow ul')[0];
    var w = 0;
    $$li.each(function(li) {
        w += li.getWidth();
    });
    ul.setStyle({'width':w+'px'});

    // private variables
    var previous = $$('#slideshow a.previous')[0];
    var next = $$('#slideshow a.next')[0];
    var num = 1;
    var width = ul.down().getWidth() * num;
    var slidePeriod = 3; // seconds
    var manualSliding = false;

    // next slide
    function nextSlide() {
        new Effect.Move(ul, { 
            x: -width,
            mode: 'relative',
            queue: 'end',
            duration: 1.0,
            //transition: Effect.Transitions.sinoidal,
            afterFinish: function() {
                for (var i = 0; i < num; i++)
                    ul.insert({ bottom: ul.down() });
                ul.setStyle('left:0');
            }
        });
    }

    // previous slide
    function previousSlide() {
        new Effect.Move(ul, { 
            x: width,
            mode: 'relative',
            queue: 'end',
            duration: 1.0,
            //transition: Effect.Transitions.sinoidal,
            beforeSetup: function() {
                for (var i = 0; i < num; i++)
                    ul.insert({ top: ul.down('li:last-child') });
                ul.setStyle({'position': 'relative', 'left': -width+'px'});
            }
        });
    }

    function startSliding() {
        sliding = true;
    }

    function stopSliding() {
        sliding = false;
    }

    // bind next button's onlick event
    next.observe('click', function(event) {
        Event.stop(event);
        manualSliding = true;
        nextSlide();
    });

    // bind previous button's onclick event
    previous.observe('click', function(event) {
        Event.stop(event);
        manualSliding = true;
        previousSlide();
    });


    // auto run slideshow
    new PeriodicalExecuter(function() {
        if (!manualSliding) nextSlide();
        manualSliding = false;
    }, slidePeriod);


}

现在我猜测最好的方法是操纵悬停或鼠标悬停观察者，类似于下一个和前一个观察者停止和开始，但我只是不确定如何设置它。

欣赏正确的方向！

编辑....

所以我越来越近了，但我似乎遇到了一个问题，但希望知道原型的人可以提供帮助。

我通过添加此变量

来实现它

var stopSliding = false;

然后添加if if like

function nextSlide() {
        if (!stopSliding) {
        new Effect.Move(ul, { 
            x: -width,
            mode: 'relative',
            queue: 'end',
            duration: 1.0,
            //transition: Effect.Transitions.sinoidal,
            afterFinish: function() {
                for (var i = 0; i < num; i++)
                    ul.insert({ bottom: ul.down() });
                ul.setStyle('left:0');
            }
        });
    }
}

    // previous slide
    function previousSlide() {
        if (!stopSliding) {
        new Effect.Move(ul, { 
            x: width,
            mode: 'relative',
            queue: 'end',
            duration: 1.0,
            //transition: Effect.Transitions.sinoidal,
            beforeSetup: function() {
                for (var i = 0; i < num; i++)
                    ul.insert({ top: ul.down('li:last-child') });
                ul.setStyle({'position': 'relative', 'left': -width+'px'});
            }
        });
    }
    }

然后

ul.observe('mouseover', function(event) {
        stopSliding = true;

    });


    ul.observe('mouseout', function(event) {
        stopSliding = false;
    });

此方法有效，但只有Safari会自动启动我的幻灯片，而firefox需要交互才能启动。

然而，我确实发现在开始时将var切换为true并按照鼠标悬停的顺序进行切换，然后在Firefox中自动启动，而不是在Safari中启动。

今晚已经足够了。

Answer 1

所以我设法让它在Firefox，Safari，IE等中使用：

Event.observe( window, 'load', function() { stopSliding = false; });

这确保我的变量“stopSliding”已设置。

悬停时的Javascript滑块暂停功能

1 个答案: