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

ベストアンサー

id:i4ooon No.1

regnif回答回数56ベストアンサー獲得回数202010/01/05 10:06:45

ポイント100pt

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);
id:mune0628

i4ooonさん!、早速のご回答ありがとうございます!

ご指摘頂いた箇所を修正したら意図した通りに動作しました!

こんなに早く解決するなんて…とても感激しました。

ありがとうございました。

2010/01/05 10:29:56
  • id:mune0628
    コードを掲載しておきます。

    ◆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>

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません