スライドを最後の画像で止めたい

Question

現在slideshow.jsを使て6枚の画像をスライドさせていますが基本的に無限ループになります。
これを最後の画像まで行ったらそこで止めたいです。JQueryに詳しくないのでカスタマイズがうまくできません。どなたか方法が分かりましたらお教えください。
使用しているjsの内容は以下です。

$(function(){

	//一枚を表示している時間（ミリ秒）
	var showingTime = 6000;
	//切り替えエフェクトに掛ける時間（ミリ秒）
	var easingTime = 2000;
	
	//スライドショー本体
	var $slideshow = $('#Slideshow');
	//スライド
	var $slideshowLists = $('#Slides').children();
	
	//自動再生フラグ
	var isAutoplay = true;
	//タイムアウトの実行ID
	var playId = 0;
	
	$slideshowLists
		//全てのスライドをまず非表示に
		.hide()
		//そのうち一番最初のものを選択
		.first()
		//現在表示しているスライドを示すcurrentクラスを付与
		.addClass('current')
		//表示
		.show();
	
	//写真を切り替える関数
	var slideChange = function(isBack)
	{
		//現在のスライドを取得
		var $current = $slideshowLists.filter('.current');
		/**
		 * 次のスライドを取得
		 * $current.next().lengthでリスト上に次のスライドがあるかどうか調べる。
		 * 1ならばあるので次のスライドは$current.next()になる。
		 * 0ならば次のスライドは先頭の物 ― $slideshowLists.filter(':first') ― になる。
		 */
		if(!isBack)
		{
			var $next = ($current.next().length == 1) ? $current.next() : $slideshowLists.first();
		}
		else
		{
			var $next = ($current.prev().length == 1) ? $current.prev() : $slideshowLists.last();
		}
		
		//現在のスライド
		$current
			//currentクラスを削除し
			.removeClass('current')
			//フェードアウト
			.fadeOut(easingTime);
			
		//次のスライド
		$next
			//currentクラスを付与し
			.addClass('current')
			//フェードイン
			.fadeIn(easingTime);
		
		//重複実行防止
		clearTimeout(playId);
		
		//自動再生設定
		if(isAutoplay)
		{
			//Timeoutをもう一度設定する
			playId = setTimeout(slideChange, showingTime);
		}
	}

	$('#Previous')
		.click(function(event){
			slideChange(true);
		});
	$('#Next')
		.click(function(event){
			slideChange();
		});
		
	$('#StopAndPlay')
		.click(function(event){
			var $this = $(this);
			if($this.is('.stop'))
			{
				clearTimeout(playId);
				isAutoplay = false;
			}
			else if($this.is('.play'))
			{
				isAutoplay = true;
				playId = setTimeout(slideChange, showingTime);
			}
			$this
				.toggleClass('stop play')
		});

	//Timeoutを設定・実行する
	playId = setTimeout(slideChange, showingTime);
})

よろしくお願いします。

fujillin · Accepted Answer

こんにちはどういう風にしたいのかによるし、方法もいろいろ考えられるので、一概に言えません。例えば、単純に『最後が表示されたら停止する（＝何もしない）』とするなら、currentを取得した時点で if($slideshowLists.index($current)==$slideshowLists.length-1) return; のような判断を追加すれば停止します。しかし、ご提示のスクリプトは各ボタンに反応するように作成されているので、最初にprevボタンを押すと、逆転するので最後の画像が表示されてすぐに停止となります。これを防止したい場合は、方向も併せて判断する必要があるでしょう。また、逆転の場合はどうなったら停まるのかがご質問文からはわかりませんが、最後のスライドとは別に条件を設けるのなら、それに関しても追加する必要がでてきます。あるいは『一度表示済みの画像が来たら停止（＝何もしない）』のような方向で考えてみると…。 addClass('current showed')などとして、表示済みの画像にはshowedクラスが残るようなことにしておけば、nextが決まった時点で if($next.hasClass('showed')) return; のような判断を追加することで可能になるでしょう。とは言え、スライドショー中に制御ボタンをいろいろ押されたりすると予定通りでなくなるので、ボタンを停止しておくとかの対処が必要になってくるのかも知れません。（あるいは、いろいろ押されたときにどのような処理に変化すべきかを予め考えて、コード化しておく必要があります）ご提示のスクリプトがある程度汎用的に作られていることもあって、質問者様の思い通りの機能（ご質問文からは、全部の内容を読み取れませんけれど）にするためには、あちこちに手を入れる必要が出てきそうに思われます。その結果、やってみたら、元の形はあまり残っていないというようなことも考えられるので、ご提示のスクリプトに拘らず、初めから単機能のものを作成した方が遥かに簡単なのではないかと想像します。例えば、（CSSやHTMLがどうなっているか不明なので、以下のサンプルでは適当です） Sample

スライドを最後の画像で止めたい

こんにちは

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング