jQueryを使い、トップページを背景となる写真3枚を全画面で
フェードイン→フェードアウトという風にループしています。
3枚目の写真でそのまま静止させたいのですが、どのようにしたら3枚目の写真でストップするのでしょうか?
以下のもののファイルを書き換える必要があると思いますのでソースを記述しました。
fadechanger.js
fitter.js
HTMLページのソースとfadechanger.js、fitter.js どちらのファイルのソースを書き換えればよいのでしょうか?
初めてjQueryを使ってみたので全くの初心者です。
どうぞよろしくお願いします。
HTMLページのソース
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="js/fitter.js"></script>
<script src="js/fadechanger.js"></script>
<script src="js/imgloader.js"></script>
<script src="js/transition.js"></script>
<script>
$(function() {
// オプションの一括指定
var options = {
imglist: [
"photo/0.jpg",
"photo/1.jpg",
"photo/2.jpg",
],
width: 1000,
height: 1100,
minWidth: 600,
minHeight: 660,
callback: function() {
var self = this;
// ローディング表示を終了
$("#loading").hide();
// 末尾の要素をフェードイン
self.find("img").eq(-1).fadeIn(function() {
// フェード切り替え開始
self.fadechanger({ selector: "img" });
});
// fitter起動
self.fitter(options);
}
}
// loader
$("#imgContainer").imgloader(options);
// transition
$("#header a").transition();
});
</script>
fadechanger.jsのソース
(function($) {
/**
* fadechanger
*/
$.fn.fadechanger = function(options) {
var self = this,
defaults = {
speed: 3000,
wait: 3000,
selector: ""
},
config = $.extend({}, defaults, options);
self.find(config.selector).show();
(function() {
var arg = arguments;
self.find(config.selector).eq(-1).delay(config.wait).fadeOut(config.speed, function() {
$(this).prependTo($(this).parent()).show();
arg.callee();
});
})();
return this;
};
})(jQuery);
fitter.jsのソース
(function($) {
/**
* fitter
*/
$.fn.fitter = function(options) {
var self = this,
defaults = {
width: 1000,
height: 1100,
minWidth: 600,
minHeight: 660,
selector: "img"
},
config = $.extend({}, defaults, options);
// resize
$(window).resize(function() {
var w = $(window).width(),
h = $(window).height();
// 最小サイズ設定
if (w < config.minWidth || h < config.minHeight) {
return false;
}
// IE 6
if ($.browser.msie && $.browser.version < 7) {
self.width(w).height(h);
}
// 画像サイズ変更。後ろはIE用
if (w / h > config.width / config.height) {
self.find(config.selector).width(w).height(w * config.height / config.width);
} else {
self.find(config.selector).height(h).width(h * config.width / config.height);
}
}).resize();
return this;
};
})(jQuery);
No.1
- 回答日時:
ご自身で書かれたものではないということですね。
基本的にjQueryプラグインは、提供されている機能以外のことはできないと思ってください。もちろん、JavaScriptを書ければ著作の範囲で改変することはできますが、著作クレジットの内容は確認されていますか?
スライドショーの止め方が分からないということは、おそらくはJavaScript自体をご存知ないと思われますが、そういう場合は、改変することを考えずに、ご自身の要望にあった別のプラグインを探すことをおすすめします。
つまり、このプラグインにはスライドショーストップの機能が提供されていないということです。
スライドショーのプラグインはたくさんあるので、探せば見つかると思いますよ。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- JavaScript 【jquery】EasyUIのSubGridにMySQLのテーブルデータを表示&編集にしたい 5 2022/05/02 13:10
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jqueryでのkeydownイベント発生...
-
文字サイズの大中小について
-
画像をゆっくりと切り替える方法
-
日本語記述が出来ません(XML?)
-
外部JSファイルで値を受け取る方法
-
音楽再生用jQueryプラグイン「j...
-
jQueryの基本的なことについて...
-
jQuery-datepicker on IE8
-
<a href="#" …>の意味を教えて...
-
別ファイルのfunctionの読み込み方
-
JavascriptとJqueryを混在し記述
-
Dreamweaver で 外部JSを読み込...
-
pythonのWebスクレイピングでfi...
-
条件分岐で、読み込む外部スク...
-
Safariで<iframe>のinnerHTMLを...
-
bodyにidをつける理由は何ですか?
-
JavaScriptでiframeの内容を「...
-
function の return 値を表示し...
-
リンクをクリックすると文字が...
-
ウィンドウ名の設定
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
base64encodeでの文字化けについて
-
複数のjavascriptを使うと動か...
-
jqueryでのkeydownイベント発生...
-
Jqueryの干渉について
-
Base64に変換したHTMLの<script...
-
プラグイン無しでContactform7...
-
jQuery-datepicker on IE8
-
サイトにアクセスした際、数秒...
-
jQuery が動作しません。
-
javaスクリプトについて質問で...
-
jQueryでloadした要素の操作が...
-
jqueryについて(Lightboxとbxs...
-
scrollsmoothly.jsが動かない
-
JavaScriptで背景や文字色を色→...
-
jQuery UIのdraggableについて
-
colorboxの直接呼び出し方法に...
-
「jquery.csv2table.js」から生...
-
●jQuery;スクロールでついてく...
-
jQueryのdraggable縦書き出来ま...
-
Camera slideshowの使い方について
おすすめ情報