2011-08-13 11 views
1

私が購入したMagentoテンプレートに付属のこのスライダーの小さなヘルプを探しています。Javascriptスライダーポーズ機能onホバー

私はホバーにポーズを追加してマウスで再開しようとしていますが、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ではうまくいきません。

今晩は十分でした。

+0

私はだから私はul.observeの線に沿って何か(「マウスオーバー」、機能(イベント){ \t \t \t Event.stopを試してみた「観察」検索としてうん、私は息子としてjQueryのタグを持つ私のミスを実現(イベント); \t \t \t \t}); \t \t \t \t //前ボタンのOnClickイベントをバインド \t \t ul.observe( 'マウスアウト'、関数(イベント){ \t \t \t Event.start(イベント); \t \t})。そこには愛はない。ここでの構文の助けがあれば、少し試作してみるつもりです。 – user892670

+0

うん、それはしかし、私にヒントに感謝新しい世界です! – user892670

+0

だから私はほとんどそれを持っています。Firefoxでは動作しますが、Safariでは動作しません(IEでは何が起こっているのかを知っています) – user892670

答えて

0

だから私は使用してIEなど、それは、Firefox、Safariの両方で動作するように得ることができた:

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

これが私の変数「stopSliding」が設定されていることを保証します。