デモページはこちら

HTML5から導入されたWeb Storageの一種localStorageを利用して、メインビジュアルを切り替えた際のデータをブラウザに保存します。localStorageのデータは明示的に削除しない限り有効期限はないため、ブラウザを閉じても次回ページアクセス時は最後に切り替えたメインビジュアルが表示できます。

jQueryの記述はページアクセス時とサムネイル画像クリック時の動作に分かれます。ページアクセス時はwindow.localStorageでブラウザがlocalStorageに対応しているか確認し、localStorageのキー「viewnum」の値を変数viewvalueに格納します。もし値がなければ「1」を格納し、viewvalueに対応したメインビジュアルを表示します。初回ページアクセス時のviewvalueは「1」になります。

サムネイル画像クリック時はサムネイル画像の順番に対応したメインビジュアルを表示して、localStorageのキー「viewnum」にサムネイル画像の順番の数値を値としてセットします。このlocalStorageのデータが次回ページアクセス時に利用されます。

$(function(){

	var viewvalue;
	if(window.localStorage) {
		viewvalue = localStorage.viewnum;
		if(!viewvalue){
			viewvalue= 1 ;
		};
		$(".mainvisual").children('img').attr('src', 'images/hover0' + viewvalue + '.jpg');
	}

	function customview(selection){
		$(".mainvisual").css({"opacity":"0"});
		$(".mainvisual").children('img').attr('src', 'images/hover0' + selection + '.jpg');
		$(".mainvisual").stop().animate({"opacity":"1"});
	}

	$(".hover_image_wrap a").on('click',function(e){
		e.preventDefault();
		var orignum = $(".hover_image_wrap a").index(this);
		var listnum = parseInt(orignum)+1;
		customview(listnum);
		localStorage.viewnum = listnum;
	});

});

なお、Chromeのデベロッパーツールで「Application」→「Storage」→「Local Storage」から該当のURLを選択すると、localStorageのデータが確認できます。