jQuery でスライドショーをストップ
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);
お礼
早々のご回答ありがとうございます。 ＞onloadって事は読み込まれた時に自動実行したいって事だよね？ その通りです。 早速、addEventListener() に関して調べてみます。