悬停时的Javascript滑块暂停功能

寻找与我购买的Magento模板附带的此滑块的一点帮助。悬停时的Javascript滑块暂停功能

我想添加暂停悬停和恢复在鼠标上，但我很新，让我的手这个肮脏的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中启动。

今天晚上够了。

来源

2011-08-13 user892670

是啊，我意识到我与JQuery的标签作为儿子的错误，因为我搜索“观察”一起ul.observe（“鼠标悬停”，函数（事件）{ \t \t \t Event.stop的线条所以我试过的东西（event）; \t \t \t \t}）; \t \t \t // \t绑定前按钮的onClick事件 \t \t ul.observe（ '鼠标移开'，函数（事件）{ \t \t \t Event.start（事件）; \t \t}）;但那里没有爱。对这里的语法的任何帮助将不胜感激我将研究一下Prototype。 – user892670

是啊，这是一个新的世界，但我感谢提示，尽管！ – user892670

所以我几乎拥有它。它适用于Firefox，但不适用于Safari（所以上帝知道IE中发生了什么） – user892670

所以我设法得到它使用两个火狐，Safari，IE等工作：

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

这保证了我的变量“stopSliding”设置。

来源

2011-08-17 19:24:31 user892670

悬停时的Javascript滑块暂停功能

回答

相关问题