POPS WEB

簡易SLIDESHOW-1

pops-slideshow-01.js

簡易ページャー付きスライドショー、サンプル表示

HTML構造を直接書きますが、画像はJS側スクリプトに記述します。

• ページャー、メニュー機能を付加しました。
• 簡易記述方式のＪＳです。読み込めば直ぐ実行します。
• サイクルタイムは、ＪＳで2種設定できます。書き換えてください。
  (スタートまでの時間、サイクル、スライドの時間など、画像の大きさ状況にあわせる)
• ＪＳで必要な設定をして上書き保存する。
• 画像は個人で、5-10枚用意ください。
• 画像名、画像までのパスはＪＳに記載します、随時ロード形式です。
  (その都度、画像をロードしますので、画像転送量を少し抑えることができます)
• 画像の大きさで、ＣＳＳをも変更ください。
• 用途が広がります、複数の設置は原則できません。
• IE8 はキレイに動作しません。Google Chrome を利用ください。

簡単な動作の説明

ページャー、オンオフボタンのメニュー機能を付加すれば、「スライドショー」になります。アルバム、ＴＯＰページ用途としても使用可能です。
初期設定では、番号つきのページャーですが、サムネール画像を入れることも可能です。

簡易ページャーの説明

オンオフボタンなし、番号ボタンのみの「簡易ページャー」方式の簡単なものです。但し、delay()を使用するものでは機能しません。

• オンオフボタンなしの簡易ページャー、を付加しました。
• auto_use: use オート設定になります。
• auto_use: stop オート設定が解除されます。番号ボタンでのみ表示可能。
• auto_use: start オート設定が解除されていますが、番号ボタンを押せばオート設定にもどります。

簡単なスクリプト説明

途中略す

目的に応じて設定してください

//ページャー関連設定/startはページャーボタンが押された場合autoに変更
var auto_use='start';//use stop start 自動設定の使用、通常はuseです
var menu_use='use';//use メニュー全体の使用
var pager_box_use='use';//use ページャーの使用

略

//サムネール、番号アクション設定
if (pager_box_use == 'use') {
	//HOVER-ACTION-addClass
	var li_index_no;
	$('#thumb_box ul > li').bind({
		//click
		click: function(e) {
			//クリックされたら指定番号画像をＬＯＡＤ
			count = $(this).index();

			番号ボタンが押されたら通常はタイマーオフである

			//タイマーオフ
			clearTimeout(cycletimeID);

			auto_use:'start'の場合のみ、auto_on:'on'に復活させて、終了処理より
			タイマーを有効に機能させるように仕組んでいる

			//タイマーを有効にする
			if (auto_use =='start') {auto_use='use';auto_on = 'on';}
			//押された番号をactivedにする
			$("#thumb_box ul li").removeClass("pgr_actived");
			$(this).addClass("pgr_actived");
			img_url = path+img_urls[count];
			imgload ();
		},
	});
}

略

目的に応じて少しは変更できるようになっている
ほかには無い、first_timeのため少々複雑です、first_time終了後にページャーボタンを
表示するようにしている

count = 0;
//最初の画像を代入
img_url=path+img_urls[count];
keep_url=img_url;

//最初の画像を下層に表示する
imgholder_elm.children("img").empty().attr({'src':img_url});
set_text("AUTO-ON");

//メニュー全体を使用しない場合/強制AUTO設定
if (menu_use !='use') {
	$('#thumb_box_wrap').css({'display':'none'});
	//強制AUTO設定
	auto_use = 'use';auto_on = 'on';
}

AUTOを復活させるためstartの場合最初はAUTO解除

//強制AUTO解除/初期停止状態
if (auto_use =='stop') {auto_on = 'off';set_text("AUTO-OFF");show_pager();}
if (auto_use =='start') {auto_on = 'off';set_text("AUTO-OFF");show_pager();}
//NO1actived
if (pager_box_use == 'use') {
	$('#thumb_box ul li').eq(0).addClass("pgr_actived");
}

//START first_time-set
if (auto_on == 'on') {
	window.setTimeout(function(){
		//pager表示
		show_pager();
		//No1
		count = 0;
		nextImage();
	}, first_time);
}

略

次ぎ画像表示のため、auto_on:'on'の場合のみタイマーをセットするようにしている

//終了処理
function show_image_parts() {

	略

	//オートの場合はタイマー始動
	if (auto_on == 'on') {
		timerset();
	}

};

設置方法

簡易ＪＳ記述、間違いの少ない、setTimeout の通常方式で記述しています。なお、設置するページが違えば、別画像ででも使用できま すが、画像の大きさが違えば別のＣＳＳ名で新たに作ってリンクしてください。

[ HTML構造を作る ]
以下のように構造を作ってください。ID は #pops_slide_show です。

<div id="pops_slide_show">
	<div id="slideshow_box">
		<div id="ss_imgholder"><img /></div>
		<div id="top_base"><img /></div>
		<div id="ss_loading"></div>
		<div id="view_text"></div>
	</div>
</div>
<div id="thumb_box_wrap">
	<div id="thumb_box">
		<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		</ul>
	</div>
</div>
<br style="clear:both;" />

注意、原則、全画像はＪＳに登録します。画像伸縮のため幅高さを100%で使用しますので、大きさは記入しないでください。

[ 使用方法 ]、JSを読み込むだけで実行します。またHEAD部分に直接記述しても実行します。
注意、jquery1.42以降のバージョンで作動します。

読み出す場合
<link rel="stylesheet" type="text/css" href="/main/css/pops-slideshow-01.css" />
<script type="text/javascript" src="/main/js/jquery.js"></script>
<script type="text/javascript" src="/main/js/pops-slideshow-01.js"></script>

----------------------------------------------------------------

HEAD部分に直接JSを記述する場合
<script type="text/javascript">
	ここにJS部分を直接記述
</script>

JS、CSS、Loading画像

JS pops-slideshow-01.js 通常方式

中には使用していない変数もあります。

//pops-slideshow-01.js
//setTimeout 通常方式
//POPS WEB KOUBOU

(function($){

	$(function(){

		//大きさ
		var bs_W = 640;
		var bs_H = 200;

		//時間、アニメ速度
		var first_time = 8000;//スタートまでの時間、5000以上 
		var cycle_time = 8000;//サイクル 5000以上
		var fade_speed = 600;//フェード時間 400-1000
		var slide_speed = 1000;//拡大縮小時間 400-1000

		//TEXT表示
		var text_use="use";//use

		//ページャー関連設定/startはページャーボタンが押された場合autoに変更
		var auto_use='use';//use stop start 自動設定の使用、通常はuseです
		var menu_use='use';//use メニュー全体の使用
		var pager_box_use='use';//use ページャーの使用

		//画像までのパス
		var path='/main/images/';
		//画像名を登録する
		var img_urls=['photo_m1.jpg','photo_m2.jpg','photo_m3.jpg','photo_m4.jpg'];
		var list_len=img_urls.length;

		//出現確率
		var view_type = 'move';
		var random_nm = ['move','move','fade'];

		//jQueryObjectCache
		var imgholder_elm,slideshow_elm,top_elm;
		var img_url,keep_url,loading,thumbshowbox;
		var imgPreloader;//opela

		//chash
		slideshow_elm = $('#slideshow_box');
		imgholder_elm = $('#slideshow_box #ss_imgholder');
		top_elm = $('#slideshow_box #top_base');
		loading = $('#slideshow_box #ss_loading');


		//スライド番号、random表示しない場合使用される
		var slide_no=3;//3
		//random表示にするか random の場合だけ、他の文字では実行しない
		var slide_type='random';//random

		//位置情報
		var pos_Xs=[-bs_W,0,bs_W,bs_W,bs_W,0,-bs_W,-bs_W,0,bs_W/2,0];
		var pos_Ys=[-bs_H,-bs_H,-bs_H,0,bs_H,bs_H,bs_H,0,bs_H/2,0,0];

		//汎用変数/使用していないものもある
		var count = 0;
		var no = 0;
		var move_type_name = ['in','out'];
		var in_type = "in";
		var fade_set = "";
		var anime_move = "";
		var box_len;

		//opacity使用の判定
		var support_op=true;
		if (!jQuery.support.opacity) {support_op=false;}

		//AUTO、ページャー関連変数
		var startbtn_txt = ["||","||",">>","<<"];
		//auto
		var auto_on = 'on',cycle_no = 0,cycletimeID = null;
		var new_count = 0;
		//click判定
		var clickflag='';

		//------------------------------------------------

		//init
		var init = function () {

			//loading-Set
			loading.css({'width':bs_W,'height':bs_H,'display':'none'});
			//sliceBox非表示
			top_elm.css({'display':'none'});

			//サムネール、番号アクション設定
			if (pager_box_use == 'use') {
				//HOVER-ACTION-addClass
				var li_index_no;
				$('#thumb_box ul > li').bind({
					//click
					click: function(e) {
						//クリックされたら指定番号画像をＬＯＡＤ
						count = $(this).index();
						//タイマーオフ
						clearTimeout(cycletimeID);
						//タイマーを有効にする
						if (auto_use =='start') {auto_use='use';auto_on = 'on';}
						//押された番号をactivedにする
						$("#thumb_box ul li").removeClass("pgr_actived");
						$(this).addClass("pgr_actived");
						img_url = path+img_urls[count];
						imgload ();
					},
					//hover/mouseover
					mouseover: function(e) {
						li_index_no = $(this).index();
						//css
						$(this).addClass("pgr_hoverd");
					},
					//hover-Out-removeClass
					mouseout: function(e) {
						$(this).removeClass("pgr_hoverd");
					}
				});
			}

			//pager 一旦非表示/最初のタイマーとの関係
			$('#thumb_box').css({'display':'none'});

			//
			count = 0;
			//最初の画像を代入
			img_url=path+img_urls[count];
			keep_url=img_url;

			//最初の画像を下層に表示する
			imgholder_elm.children("img").empty().attr({'src':img_url});
			set_text("AUTO-ON");

			//メニュー全体を使用しない場合/強制AUTO設定
			if (menu_use !='use') {
				$('#thumb_box_wrap').css({'display':'none'});
				//強制AUTO設定
				auto_use = 'use';auto_on = 'on';
			}
			//強制AUTO解除/初期停止状態
			if (auto_use =='stop') {auto_on = 'off';set_text("AUTO-OFF");show_pager();}
			if (auto_use =='start') {auto_on = 'off';set_text("AUTO-OFF");show_pager();}
			//NO1actived
			if (pager_box_use == 'use') {
				$('#thumb_box ul li').eq(0).addClass("pgr_actived");
			}

			//START first_time-set
			if (auto_on == 'on') {
				window.setTimeout(function(){
					//pager表示
					show_pager();
					//No1
					count = 0;
					nextImage();
				}, first_time);
			}

		}

		//pager表示
		var show_pager = function () {
			if (pager_box_use == 'use') {
				$('#thumb_box').css({'display':'block'});
			}
		}

		//表示の種類により振り分け
		var set_view_images = function () {

			//timer-off
			view_type = random_nm[Math.floor(Math.random() * random_nm.length)];

			if(view_type == 'fade') {
				fade_image();
			}
			if(view_type == 'move') {
				move_image();
			}
		}

		//フエード処理表示
		function fade_image (){

			anime_move = 'move';
			fade_set = "fade";
			
			//上画像TOPelmに前の画像をセット
			top_elm.children("img").empty().attr({src:keep_url});
			top_elm.css({'top':0,'left':0,'width':bs_W,'height':bs_H,'display':'none'});
			//imgholder
			imgholder_elm.children("img").empty().attr({'src':img_url});
			top_elm.css({'display':'block'});

			top_elm.animate({'opacity':0},fade_speed,function() {
				//下画像に新しいＵＲＬセット
				imgholder_elm.children("img").empty().attr({'src':img_url});
				//上画像非表示、ずらす
				top_elm.css({'left':bs_W,'top':0,'display':'none'});
				//終了処理に進む
				show_image_parts();

			});

		};

		//移動処理表示
		function move_image () {

			anime_move = 'move';
			fade_set = '';
			set_text('');

			//random-No
			if (slide_type == 'random') {
				slide_no=Math.floor(Math.random() * 10);
			}

			//postion
			pos_x=pos_Xs[slide_no];
			pos_y=pos_Ys[slide_no];
			//WH
			var slide_W=bs_W;
			var slide_H=bs_H;
			if (slide_no == 8) {slide_H=0;}
			if (slide_no == 9) {slide_W=0;}

			//INタイプ、OUTはない

			//上層移動とＵＲＬの代入
			top_elm.css({'top':pos_y,'left':pos_x,'width':slide_W,'height':slide_H,'display':'none'});
			top_elm.children("img").empty().attr({'src':img_url});
			top_elm.css({'display':'block'});

			//top-slideスライドアニメ実行
			top_elm.animate({'top':0,'left':0,'width':bs_W,'height':bs_H},slide_speed,function(){
				//
				imgholder_elm.children("img").empty().attr({'src':img_url});
				//上画像非表示、ずらす
				top_elm.css({'left':bs_W,'display':'none'});

				//終了処理に進む
				show_image_parts();
			});

		}

		//end-anime、終了処理
		function show_image_parts() {

			//fade修正
			if (fade_set == 'fade') {
				top_elm.css({'opacity':1});
				//opacity使用の判定フィルター除去
				if (!support_op) {top_elm.css({'filter':'none'});}
			}

			fade_set = '';
			anime_move = '';

			//keep-url
			keep_url=img_url;

			//オートの場合はタイマー始動
			if (auto_on == 'on') {
				timerset();
			}

		};

		//NEXT、次ぎ画像のＬＯＡＤ
		function nextImage() {
			//カウントアップ
			count++;
			if (count > list_len-1) {count = 0;}
			//imgタグに入れる、URL取得
			img_url = path+img_urls[count];
			imgload ();
		}

		//imgPreloader
		var imgload = function() {
			//loading
			loading.css({'display':'block'});
			//set-imgPreloader
			imgPreloader = new Image();
			//onload
			imgPreloader.onload = function() {
				//loading
				loading.css({'display':'none'});
				//ページャーactive
				active_set();
				//表示振り分け
				set_view_images();
			}
			//url
			imgPreloader.src = img_url;
		}

		//set-text
		function set_text(text) {
			if (text_use == 'use') {
				$('#view_text').text(text);
			}
		}

		//---------------------------------------------

		//ページャーactiveセット
		var active_set = function () {
			//ページャーactive
			$("#thumb_box ul li").removeClass("pgr_actived");
			$('#thumb_box ul li').eq(count).addClass("pgr_actived");
		}

		//AUTO、ページャー関連関数
		//cycle_timer、タイマー
		var timerset = function () {
			cycletimeID=setTimeout(nextImage,cycle_time);
		}

		//---------------------------------------------

		//init start
		init();

	});

})(jQuery);

Loading画像 31x31

CSS pops-slideshow-01.css

/* pops-slideshow-01.css 日本語*/

#pops_slide_show {
	display:block;
	position:relative;
	width:640px;
	height:200px;
	background-color:#000000;
}
#pops_slide_show #slideshow_box {
	display:block;
	position:absolute;
	top:0;left:0;
	width:640px;
	height:200px;
	background-color:#000000;
	overflow:hidden;
}

#slideshow_box #ss_imgholder {
	display:block;
	position:absolute;
	top:0;left:0;
	width:640px;
	height:200px;
	padding:0;
	margin:0;
	border-style:none;
	background-color:#000000;
}
#slideshow_box #ss_imgholder img {
	padding:0;
	margin:0;
	border-style:none;
	text-decoration:none;
}

#slideshow_box #top_base {
	display:block;
	position:absolute;
	top:0;left:0;
	overflow:hidden;
}
#slideshow_box #top_base img {
	width:100%;
	height:100%;
	border-style:none;
}

#slideshow_box #ss_loading {
	display: block;
	position:absolute;
	top:0;left:0;
	border:0;
	background: url("/main/images/loading.gif") no-repeat center center;
	background-color: none;/*Safari*/
}
#slideshow_box #view_text {
	display:block;
	position:absolute;
	top:5px;left:5px;
	width:80%;
	height:20px;
	color:#FF0000;
}

/* thumbbox */
#thumb_box_wrap {
	display: block;
	position:relative;
	width:640px;
	height:25px;
	text-align:center;
	background-color:#000000;
}
	
#thumb_box_wrap #thumb_box {
	display:block;
	position:absolute;
	top:2px;left:10px;
	width:400px;
	height:20px;
	margin:0;
	text-align:center;
}
#thumb_box ul {
	position:relative;
	margin:2px;
	background-color:none;
}
#thumb_box ul li {
	display:inline;
	list-style:none;
	width:14px;
	height:14px;
	margin:2px 0 0 2px;
	/*border:1px #FFFFFF solid;*/
	font-size:10px;
	color:#CCCCCC;
	background-color:#333333;
	text-align:center;
line-height:150%;
	overflow:hidden;
	cursor: pointer;
	float:left;
}

#thumb_box ul li.pgr_actived {
	background-color:#D08B3A;
}
#thumb_box ul li.pgr_hoverd {
/*border:1px #FF0000 solid;*/
	background-color:#FF0000;
}

以上です。