jQuery Cycle Plugin(http://jquery.malsup.com/cycle/)についてですが、
自動再生ではなく、クリックで動作させたいと思っています。
そこで、1番目の画像をクリックしたら、最後の画像まで順番にフェードし、
1番目に戻る。といったような動きは、可能でしょうか。
オプションの設定をみましたが、分からなかったので
ご存知の方がおられましたらお教え頂けないでしょうか。
どうぞ宜しくお願いいたします。
No.2ベストアンサー
- 回答日時:
(function ($) {
$.fn.myCycle = function (options) { // プラグインメソッド
// 設定オプション
var opts = $.extend({ autostop: true }, options); // autostop: trueは共通値
this.each(function () { // 複数jQuery Cycle設定
var obj = $(this); // 対象jQueryオブジェクト
var newOpts = $.extend({}, opts); // オプションコピー
newOpts.autostopCount = obj.find('img').length + 1; // 自動停止切り替え回数(切り替え要素数 + 1 で先頭停止)
// 自動停止でコールバック
newOpts.end = function () {
obj.cycle('destroy'); // もろもろ削除
obj.cycle(newOpts); // オプションを渡してjQuery Cycle再設定
obj.cycle('pause'); // 一時停止
};
obj.cycle(newOpts); // オプションを渡してjQuery Cycle設定
obj.cycle('pause'); // 一時停止
// 先頭要素clickイベント
$('img:first', obj).click(function () {
obj.cycle('resume'); // 再始動
});
});
return this;
};
})(jQuery);
// ここまでを適当な名前で保存(jquery.cycle.extend.js)
HTML
<!-- include jQuery library -->
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<!-- 適当な名前で保存したjsファイル -->
<script type="text/javascript" src="jquery.cycle.extend.js"></script>
<!-- initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function () {
$('.slideshow').myCycle(); // プラグインメソッド呼出し
});
</script>
No.1を繰り返し処理しただけですけど、とりあえずこんな感じで。
ご連絡が遅くなってしまい申し訳御座いません!
お教え頂いた方法で思っていたとおりに動作しました!
大変助かりました。感謝致します。
どうもありがとうございました!!
No.1
- 回答日時:
<script type="text/javascript">
$(document).ready(function () {
// 設定オプション
var opts = {
autostop: true, // 自動停止
autostopCount: 6, // 自動停止切り替え回数(切り替え要素数 + 1 で先頭停止)
// 自動停止でコールバック
end: function () {
obj.cycle('destroy'); // もろもろ削除
obj.cycle(opts); // オプションを渡してjQuery Cycle再設定
obj.cycle('pause'); // 一時停止
}
};
var obj = $('.slideshow'); // 対象jQueryオブジェクト
obj.cycle(opts); // オプションを渡してjQuery Cycle設定
obj.cycle('pause'); // 一時停止
// 先頭要素clickイベント
$('img:first', obj).click(function () {
obj.cycle('resume'); // 再始動
});
});
</script>
JQuery Cycle Plugin - Option Reference
http://jquery.malsup.com/cycle/options.html
この回答への補足
ご回答頂き大変ありがとうございます!
お教え頂いたとおりにやってみたら、思っていたとおりに動作しました!
説明も書いていただいてありがとうございます。
もう1点出来たらお教え頂きたいのですが、
これをページ内に複数設置したく同じクラス名で別々で動作させることは可能でしょうか?
いろいろコードをいじってみましが、
基礎的な事がまだ分かっておらず、わからず苦戦しております。
どうぞ宜しくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- Windows 8 動画の再生とタイトルの変更方法を教えてください。 3 2022/08/01 14:51
- JavaScript jQueryでのレスポンシブが綺麗に動かない 3 2022/06/21 11:08
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- Windows 10 再起動後 Pinが使用できず、PC(windows11)にサインインできない 3 2022/08/30 20:53
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript プラグイン無しでContactform7にdatepickerを実装 3 2022/10/25 02:18
- Windows 10 Windows10でセーフモードが出来ません。 2 2022/04/22 23:37
- 画像編集・動画編集・音楽編集 daVinciResolveの再生プレビュー画面がカクつきます。 daVinciResolve18を 2 2023/01/20 01:35
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
DreamWeaverでJS
-
ヤフーのジオの広告のような技法
-
map とlightbox
-
JW Playerの"file"にURLに付け...
-
Fc2ブログ サイドバーのアドセ...
-
Spry と facebox の併用はでき...
-
base64encodeでの文字化けについて
-
iframeのサイズの自動調整につ...
-
<a href="#" …>の意味を教えて...
-
Cygwinでログをのこす方法
-
JavaScriptでiframeの内容を「...
-
プルダウンメニューを別ファイ...
-
変数の代入値を外部の.txtファ...
-
インラインフレームで表示され...
-
(Javascript)印刷するファイル...
-
あなたのXAMPPのdashboard内のj...
-
外部からのjs呼び出しについて。
-
スマホ上で、左右スワイプで次...
-
onLoadをbodyタグ以外で使用する
-
openerの関係が崩れてしまった...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
base64encodeでの文字化けについて
-
複数のjavascriptを使うと動か...
-
マウスオーバー+クリカブルマッ...
-
jquery ui.resizable 使い方
-
jqueryでのkeydownイベント発生...
-
Jqueryの干渉について
-
ebayの返信で『 Message may no...
-
<script>タグというのはどこか...
-
jqueryについて(Lightboxとbxs...
-
javascript外部読み込みの際の引数
-
lightbox2 表示の不具合
-
colorboxの直接呼び出し方法に...
-
外部JSファイルで値を受け取る方法
-
bxslider、画像が3枚以上になる...
-
同HTML内で複数のjQueryを設置...
-
javaスクリプトについて質問で...
-
音楽再生用jQueryプラグイン「j...
-
サイトにアクセスした際、数秒...
-
DreamWeaverでJS
-
jsファイルで配列を定義し、j...
おすすめ情報