プロが教える店舗&オフィスのセキュリティ対策術

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);

A 回答 (2件)

ご自身で書かれたものではないということですね。


基本的にjQueryプラグインは、提供されている機能以外のことはできないと思ってください。もちろん、JavaScriptを書ければ著作の範囲で改変することはできますが、著作クレジットの内容は確認されていますか?

スライドショーの止め方が分からないということは、おそらくはJavaScript自体をご存知ないと思われますが、そういう場合は、改変することを考えずに、ご自身の要望にあった別のプラグインを探すことをおすすめします。
つまり、このプラグインにはスライドショーストップの機能が提供されていないということです。
スライドショーのプラグインはたくさんあるので、探せば見つかると思いますよ。
    • good
    • 0
この回答へのお礼

そうなんですね。分かりました。ありがとうございました。

お礼日時:2012/04/04 06:08

self.find(config.selector).show();


の下の辺りが再帰的に動いている部分のように見えます(チラ見レベルなので、違ってたらごめんなさいw)
ここにカウンタ入れて3回しか実行しないようにすればとりあえず要件は満たせるような気がします。

但し、このスクリプトを配布しているところでライセンスは一応確認して下さいね。
(改変可能かどうか)
    • good
    • 0
この回答へのお礼

わかりました。著作権があるんですね。ありがとうございました。

お礼日時:2012/04/04 06:09

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!