懸停時的Javascript滑塊暫停功能

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; 

，然後加入到工作中，如果像這樣

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

所以我設法得到它使用兩個火狐，Safari，IE等工作：

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

這保證了我的變量「stopSliding」設置。