私が購入した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ではうまくいきません。
今晩は十分でした。
私はだから私は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
うん、それはしかし、私にヒントに感謝新しい世界です! – user892670
だから私はほとんどそれを持っています。Firefoxでは動作しますが、Safariでは動作しません(IEでは何が起こっているのかを知っています) – user892670