jqueryの質問です。

Question

mune0628

9

7もっと見る

100pt

ウェブ制作

jqueryの質問です。

dumbcrossfade (http://storage.sebringcreative.com.s3.amazonaws.com/jquery/dumbCrossFade.htm)の
スクリプトを利用してフェードイン＆アウトで画像を表示する実装を試みてます。

ところがデフォルトだと画像が自動ループになってしまいます。
これをjsの追記で「1回の読込みのみ」とする事は出来るのでしょうか？

該当箇所をご教授して頂ければと思います。
宜しくお願い致します。

回答の条件

1人5回まで

登録：2010/01/04 23:00:01
終了：2010/01/05 10:30:43

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

mune0628 2010/01/04 23:01:09

コードを掲載しておきます。

◆js--------
(function($) { // 2009 Hubsoft.com && SebringCreative.com (written by Jason Sebring, mail@jasonsebring.com) - Dual licensed under the MIT and GPL licenses.
$.fn.dumbCrossFade = function(settings) {
var config = {'index':0,'showTime':10,'transitionTime':1500,'doHoverPause':null, 'maxZIndex':10, 'slideChange':null};
var timeOut = null;
var itemArray = [];
var blockAnimation = false;
var lastIndexRequest = -1;

function cancelCrossFade() {
if (timeOut !== null) { window.clearTimeout(timeOut); timeOut = null; }
}

function doCrossFadeNow() {
if (blockAnimation) {
if (arguments.length > 0) {
lastIndexRequest = arguments[0];
}
return;
}
var currentIndex = config.index;
var nextIndex = (arguments.length > 0) ? arguments[0] : (config.index >= itemArray.length - 1) ? 0 : config.index + 1;
if (currentIndex == nextIndex) { return; }
itemArray[currentIndex].css('z-index',(config.maxZIndex-1)+'');
itemArray[nextIndex].css('z-index',config.maxZIndex+'');
blockAnimation = true;
itemArray[nextIndex].fadeIn(config.transitionTime, function() {
itemArray[currentIndex].hide();
blockAnimation = false;
if (lastIndexRequest != -1) {
doCrossFadeNow(lastIndexRequest);
lastIndexRequest = -1;
}
});
if (config.slideChange !== null) {
config.slideChange(nextIndex);
}
config.index = nextIndex;
}

function doCrossFade() {
cancelCrossFade();
timeOut = window.setTimeout(function() {
doCrossFadeNow();
doCrossFade();
},config.showTime);
}

if (settings) $.extend(config, settings);

this.each(function() {
(itemArray.length === config.index) ? $(this).show() : $(this).hide();
if (itemArray.length === 0) {
if (config.doHoverPause) {
$(this).parent().hover(
function() {
cancelCrossFade();
},
function() {
cancelCrossFade();
doCrossFade();
}
);
}
}
itemArray[itemArray.length] = $(this);
});

doCrossFade();

var publicAccessor = {
'jump' : function (index) {
cancelCrossFade();
doCrossFadeNow(index);
return publicAccessor;
},
'start' : function () {
doCrossFade();
return publicAccessor;
},
'stop' : function () {
cancelCrossFade();
return publicAccessor;
}
};

return publicAccessor;

};
})(jQuery);

◆html(head)--------
<script type="text/javascript">
$(function() {
$('.dumbCrossFade .dumbItem').dumbCrossFade();
});
</script>
◆html(body)--------
<div class="dumbCrossFade">
<div class="dumbItem"> <img src="images/01.jpg"\> </div>
<div class="dumbItem"> <img src="images/02.jpg"\> </div>
<div class="dumbItem"> <img src="images/03.jpg"\> </div>
<div class="dumbItem"> <img src="images/04.jpg"\> </div>
<div class="dumbItem"> <img src="images/05.jpg"\> </div>
<div class="dumbItem"> <img src="images/06.jpg"\> </div>
<div class="dumbItem"> <img src="images/07.jpg"\> </div>
<div class="dumbItem"> <img src="images/08.jpg"\> </div>
</div>

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

regnif · Accepted Answer · 2010-01-05T10:06:45+09:00

jquery.dumbcrossfade-1.3.min.jsを修正するのは、あまり適当ではないですが、ポイントだけ抜き出すと

var currentIndex=config.index;var nextIndex=(arguments.length>0)?arguments[0]:(config.index>=itemArray.length-1)?0:config.index+1;

を

var currentIndex=config.index;var nextIndex=(arguments.length>0)?arguments[0]:(config.index>=itemArray.length-1)?currentIndex:config.index+1;

と変更すればOKです。

一応、すべてのコードも載せておきます。

// 2009 Hubsoft.com && SebringCreative.com (written by Jason Sebring, mail@jasonsebring.com) - Dual licensed under the MIT and GPL licenses.
(function($){$.fn.dumbCrossFade=function(settings){var config={'index':0,'showTime':5000,'transitionTime':1000,'doHoverPause':true,'maxZIndex':100,'slideChange':null};var timeOut=null;var itemArray=[];var blockAnimation=false;var lastIndexRequest=-1;function cancelCrossFade(){if(timeOut!==null){window.clearTimeout(timeOut);timeOut=null;}}
function doCrossFadeNow(){if(blockAnimation){if(arguments.length>0){lastIndexRequest=arguments[0];}
return;}
var currentIndex=config.index;var nextIndex=(arguments.length>0)?arguments[0]:(config.index>=itemArray.length-1)?currentIndex:config.index+1;if(currentIndex==nextIndex){return;}
itemArray[currentIndex].css('z-index',(config.maxZIndex-1)+'');itemArray[nextIndex].css('z-index',config.maxZIndex+'');blockAnimation=true;itemArray[nextIndex].fadeIn(config.transitionTime,function(){itemArray[currentIndex].hide();blockAnimation=false;if(lastIndexRequest!=-1){doCrossFadeNow(lastIndexRequest);lastIndexRequest=-1;}});if(config.slideChange!==null){config.slideChange(nextIndex);}
config.index=nextIndex;}
function doCrossFade(){cancelCrossFade();timeOut=window.setTimeout(function(){doCrossFadeNow();doCrossFade();},config.showTime);}
if(settings)$.extend(config,settings);this.each(function(){(itemArray.length===config.index)?$(this).show():$(this).hide();if(itemArray.length===0){if(config.doHoverPause){$(this).parent().hover(function(){cancelCrossFade();},function(){cancelCrossFade();doCrossFade();});}}
itemArray[itemArray.length]=$(this);});doCrossFade();var publicAccessor={'jump':function(index){cancelCrossFade();doCrossFadeNow(index);return publicAccessor;},'start':function(){doCrossFade();return publicAccessor;},'stop':function(){cancelCrossFade();return publicAccessor;}};return publicAccessor;};})(jQuery);

jqueryの質問です。

ベストアンサー

regnif56202010/01/05 10:06:45

コメント（1件)

この質問への反応（ブックマークコメント）