bxslider
http://bxslider.com
マウスオーバーしたらスライドが停止。
そして、マウスアウトしたらスライドが再び動くようにしたいです。
停止はするのですが再開してくれません。
bxsliderを動かしているコードはこちらです。
下の方は数秒後に停止するようにコールバックで指定しています。
$(document).ready(function(){
var slide = $('#bxslider01').bxSlider({
auto: true,
pause: 2000,
slideSelector: 'div.bxslider',
speed: 3500,
autoHover:true,
pager:true,
minSlides: 1,
maxSlides: 1,
moveSlides: 5,
slideWidth: '1000',
onSlideAfter: function(){slide.startAuto(); },
onSliderLoad: function(currentIndex){
$( '#bxslider01' ).delay( 10*1000 ).queue( function () {
slide.stopAuto();
});
}
});
});
解決策やコードの訂正箇所など、御教示いただけますと幸いです。
よろしくお願いいたします。
No.4ベストアンサー
- 回答日時:
ANo1、2、3です。
補足を見ました。
最初のご質問文のコードとは違うようですね。
補足でご提示のスクリプトでは最後の閉じ括弧が抜けているようですが、コピペのとき抜け落ちたものと解釈しました。
補足のスクリプトを見ただけですが・・・(テストしていません)
> var out = $("#slider li a").mouseout(~~)
> var over = $("#slider li a").mouseover(~~)
は、bxsliderとは別個にautoHoverと同様のイベント処理を設定しているように思いますが、optionでもautoHoverが設定されているので、処理がダブっていることになりませんか?
(同様の処理を2回行うだけで、実害はないかもしれませんが…)
>ただ、10秒経過し止まってから、マウスアウトすると動いてしまいます。
一方で、10秒後にautoを停止しても、上記の(個別設定の)イベント処理は活きていますので、outで設定されている通り、マウスアウトが発生すればautoStartするものと思います。
これによって、ご質問の状況となっているのではないでしょうか。
ANo2の最後にも書きましたように、別個に設定しているイベント処理を止めたければ、これを停止(削除)する必要があります。
とはいうものの、ご提示のスクリプトの場合は、そもそもイベント処理を設定する必要がないように思えますが…?
回答の最初の時点では、bxsliderをまったく知りませんでしたが、だいぶ勉強させていただきました。(笑)
すっかりお礼が遅くなってしまってしまってすみません。
ご回答ありがとうございます。
コードが違うのは、本来のコードをすべてのせると文字数の関係でかなりの数の補足を投稿しないといけなくなるためです(汗)
なので、簡略化したサンプル的なコードをのせました。
最初から簡単なコードをのせるべきでしたね。
イベント処理ですが、そうですね、autostartが設定している限り、止まらない感じでした。
しかし、いろいろと試行錯誤しているうちに
こちらで回答されているやり方を試しました。
共有します
http://m.chiebukuro.yahoo.co.jp/detail/q1394212813
すると、見事に10秒の範囲内でできました。
settimeoutのなかにさらにfunctionで実行するみたいな感じでしょうか。
ともあれ、いろいろとヒントをいただき、ありがとうございました。
No.3
- 回答日時:
ANo1、2です。
こんにちは。>実際に動かしている理想的な場面を順番に文字で説明すると・・・
最も標準的(?)に期待する機能ですよね。
ライブラリのオプションもそれを意図して作られているものだと思いますし、私の環境では問題なく実現できています。
(ANo2の(1)はこのケースのつもりでした)
(2)以降はそれ以外で質問者様がご希望なさっているのと、元の仕様が若干異なっているのかも知れないと推測して書いたものです。
・・・ということですので、残念ながらこちらの環境では問題が再現しません。
それなので、即、スクリプトの問題とは限らない可能性もあります。
こちらでは現象が再現できないこともあって、どうやらお力にはなれそうにありませんね。
(fx37、IE8でテストして、両方ともautoHoverは問題なく動作しています。)
配布元の例にautoHoverを設定したものがあれば、それが動作するかどうかを確認するのが手っ取り早いのですが、ざっと見たところ無いようですね。
質問者様の方でいくつかのブラウザでテストしてみて、現象が特定のブラウザの問題なのか、質問者様の設置環境の問題なのかなど切り分けてゆくとよろしいかと思います。(多分、fxなどでは動作するものと推測しますが…)
その際には、autoとautoHoverのみを設定するようなごくシンプルな内容で、まずは試してみることをお勧めします。
ご回答ありがとうございます。
度々、すみません。
いろいろやってみたら、こちらでそれなりにできました。停止・再開も。
私の方で勘違いしてしまっているところがけっこうあったようです。。
(特にオーバー・アウトのところ等)
ご迷惑をおかけました。
autoHoverも問題なく、動作しています。
ありがとうございます。
ただ、10秒経過し止まってから、マウスアウトすると動いてしまいます。
10秒の範囲内で停止・再開するならいいですが、10秒経過後はマウスアウトしても
autoで自動再生しないようにしたいと思っています。
念のため、補足にコードを書きました。
(文字数制限の関係で小分けして投稿しましたが、コピペでそのまま表示されます)
もし、まだお力添えいただけるようでしたら、助かります。
No.2
- 回答日時:
ANo1です。
>そのオプションは上のコードでも指定しているのですが
大変失礼いたしました。
ライブラリ自体をよく知らないので、ご提示のコードもよく確認していませんでした。
・・・ってことで、改めて確認してみました。
(1)ご提示のままの状態で、マウスオバー/アウトだけを行えばご希望の動作をしていると思いますが・・・
(こちらの環境ではちゃんと機能しています)
(2)ただし、pagerをクリックした時に停止するのが元々の仕様のようで、(想像では)その後もautoが効くようにしたいと考えてonSlideAfterを設定なさっているのだと想像しました。
(これも、こちらの環境ではちゃんと機能しています)
(3)しかしながら、同じpagerを2回以上続けてクリックすると停止します。
これがご質問の現象でしょうか? それとも上記(1)、(2)の状況でも停止してしまうのでしょうか?
ご質問文だと、(1)のマウスオバー/アウトでも動作しないというように読めるので、どのような状態なのかよくわかりません。
以下は、(3)の2回以上のクリック時の現象と仮定しての回答になります。
bxsliderのコードは見ていないので想像しただけですが、2回目のクリックでは「既に表示中のスライドであることを判定して、スライドの表示処理をパスしているのではないか」と考えました。
つまり、以下の順です。(正しいかどうかは不明です)
1)1回目のクリックでbxsliderが対象ページを表示。
autoはストップ。イベントが発生。
2)ユーザオプションのcallbackでautoを再実行
3)2回目のクリックでbxsliderはスライドは行わない。autoはストップ。
スライドしないのでイベントは発生しない。
この結果、ストップしたままになるのではないかと推測しました。
そこで、対策として考えたのは、onslideAfterを利用するのをやめて、「pagerをクリックしたらautoStartする」イベントを単独(別に)に設定するという方法です。
試してみたところ、残念ながら再スタートしませんでした。
一方で、まったく別のボタンを設けておいてそれに再スタート機能をセットして実行すれば、ちゃんと再スタートしました。
ということで、再度考えたのは、bxslider側もこのイベントを取っているので、実行順が確実にbxsliderの処理より後になるようにしておかないとうまくなさそうということ。(先に再スタートしても止められてしまうので)
・・・で、最終的に
$(".bx-pager a.bx-pager-link").click(function(){
setTimeout(function(){ slide.startAuto(); }, 1);
});
とすることで、再スタートするようになりました。
(セレクタはデフォルト環境で指定してますので、ご利用の環境に合わせてください)
以上のところまでしかテストしていませんけれど、コードをちゃんと確認したわけではありませんので、整合のとれた方法であるかどうかはわかりませんが、一応、動作はすると思います。
(手元のIE8でbxsliderは動作しますがご提示のオプションだと動作しなかったので、fx37でのみテストしています)
また、10秒後に一旦ストップなさっているようですが、その後は、pagerをクリックした場合にもautoにならないようになさりたいのであれば、ストップ処理の際に上記のイベントを削除しておく必要があるでしょう。
詳しくご回答いただき、ありがとうございます。
せっかくご丁寧に解説していただいているところ恐縮ですが、
少しこちらのやりたかったものと違うようです。
説明不足な点もあったようですので、順に説明していきたいと思います。
実際に動かしている理想的な場面を順番に文字で説明すると・・・
1.スライドが横にautoで流れる
2.pagerではなく、コンテンツ部分をマウスオーバー
3.コンテンツ部分が停止
4.マウスカーソルをコンテンツ部分から離す
5.カーソルを離したら横スライドに再びautoで流れる(実際にはautoで再び流れるどころか完全に停止してしまっています)
私がやりたかったのは、この5の処理です。
1~4はこちらでもできています。
ですのでpagerでのクリックではなくて、動いているコンテンツ部分をカーソルでマウスオーバーし停止(この部分はOK)、そしてコンテンツ部分からマウスアウトしたらautoで流れているスライドの動きを再開させたい(ここが未解決)ということですね。
わかりづらくて申し訳ありません。
まだ説明不足な点があれば、GIFアニメもしくは実際のコードを出して解説します。
お手数ですがよろしくお願いいたします。
No.1
- 回答日時:
bxsliderは知りませんけれど、配布サイトをみてみると
autoHover
というオプションが用意されているみたいですが、
それではダメなのでしょうか?
http://bxslider.com/options
ご回答ありがとうございます。
そのオプションは上のコードでも指定しているのですが、停止はするものの、停止後にマウスアウトしたとき、スライドが再開しないです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jQuery ui Datepicker 明日以降...
-
初心者です。gulpでコンパイル...
-
PowerPointで時計表示
-
VBA SORT Applyでエラー
-
C#でボタン名を変更しても動く
-
VB.netでタイマーがスタートし...
-
if(1){...}とはどういうことで...
-
〔Excel:VBA〕マクロの実行が異...
-
innerHTMLなどの反映タイミング
-
リクエスト結果が一瞬しか表示...
-
resizeToメソッドが動作しません
-
VBA ステータスバー DoEvents
-
JSPの処理の途中で、JavaScript...
-
デザイン時のVisible=Falseは実...
-
Excelのマクロ一括実行ができな...
-
JavaScriptでショートカットキ...
-
onbeforeunload と aタグの hre...
-
EXCEL入力規則のリスト設定での...
-
VB.netの重複データ数カウント...
-
setTimeoutあるいはsetInterval...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
〔Excel:VBA〕マクロの実行が異...
-
JSPの処理の途中で、JavaScript...
-
if(1){...}とはどういうことで...
-
デザイン時のVisible=Falseは実...
-
初心者です。gulpでコンパイル...
-
C#でボタン名を変更しても動く
-
PowerPointで時計表示
-
jQuery ui Datepicker 明日以降...
-
1つのVBAコードをすべてのコア...
-
リクエスト結果が一瞬しか表示...
-
Excel VBA にて JavaScript の...
-
VBA ステータスバー DoEvents
-
Excelのマクロ一括実行ができな...
-
VBA SORT Applyでエラー
-
JavaScriptでショートカットキ...
-
innerHTMLなどの反映タイミング
-
既存のwebサイトで、ローカルの...
-
2回目のSortメソッドが失敗~20...
-
OnTime を使って、分間隔で実行...
-
resizeToメソッドが動作しません
おすすめ情報
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="http://bxslider.com/lib/jquery.bxslider.css">
<script src="http://bxslider.com/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://bxslider.com/lib/jquery.bxslider.js"></sc …
<script>
$(document).ready(function(){
var slide = $("#slider").bxSlider({
auto: true,
pause: 1000,
prevText: "<",
nextText: ">",
speed: 800,
pager: true,
autoHover:true,
});
var out = $("#slider li a").mouseout(function(){
slide.startAuto();
});
var over = $("#slider li a").mouseover(function(){slide.stopAuto();});
setTimeout( function ($out,over) {slide.stopAuto();},10000);});
</script>
</head>
<body>
<ul id="slider">
<li><a target="_blank" href=""><img src="" style="background:#fff; width:600px;height:200px;"></a></li>
<li><a target="_blank" href=""><img src="" style="background:#000; width:600px;height:200px;"></a></li>
<li><a target="_blank" href=""><img src="" style="background:#f00; width:600px;height:200px;"></a></li>
</ul>
</body>
</html>
こちらコードです。
見づらくて申し訳ないです。