POPSブログ

jQuery setTimeout自動縦形コンテンツスライダー ALL-SLIDEタイプ

204

  Category:  jquery2013/02/19 pops 

ニュースサイトなどで見かける事がある、setTimeout利用の「コンテンツスライダー」です。自動のアコーディオンと似通っているところもありますが、全部一緒にスライドします。

 

jQuery setTimeout自動縦形コンテンツスライダー ALL-SLIDE、animate()方式

横型の画像、コンテンツスライダーを縦に変更したようなものです。タイマーにより全体が、スライドして順次競りあがります。中にマウスが入りますとタイマーが切れます。番号スイッチで手動でスライド可能です。マウスが欄外に出ますと自動でタイマーがセットされ動きだします。
タイマーを使用しない場合は、ボタンで操作可能です。


Example


SLIDE-NEWS (ALL-SLIDE)

MENUブロック及びボタン部分、(HOVERタイマー解除、OUTタイマー再設定、タイマー作動中はアニメ点滅)

ボタン部分に「PNG32画像」を使用のため「IE6」には対応していません。


[HOVERの状態] false

シンドラーNEWS速報


オら「海賊見習い」非正規雇用だ。イマハ AUTO ダゼ。
コテイチハ、アシバガワルイ!


重要、中に画像などを挿入する場合は、画像の大きさを必ず設定すること。


▼下のボタンで少し変更を見ることが出来ます。


背景色の切替 :                         :初期値 #DDDDDD

タイトル背景色の切替 :                       :初期値 #00CED1

スイッチ背景色の切替 :                   :初期値 #F8F8FF

内部要素高さ切替 : AUTO 250px :初期値 AUTO

高さ切替途中、アニメと重なると画面が乱れる場合があります。



HTML JS CSS


HTML

必要に応じて、スライド部品の「slide-news-chipクラス」を増減します。記載のリンクなどの数にもよりますが、表示の状況に応じて全体の高さなどを修正ください。(CSS.JSの高さ部分)


<div id="slide-news-box">
	<div class="slide-news-head"><h2>NEWS速報</h2></div>
	<div id="slide-news-block">
	<div id="number-block"><div id="blink"></div></div>
	<div id="slide-block">
		<div id="slide-inner">
		<div class="slide-news-chip">
			<h3>MENUブロック1</h3>
			<dl>
			<dt><a href="javascript:void(0);">リンク1</a></dt>
			<dt><a href="javascript:void(0);">リンク2</a></dt>
			<dt><a href="javascript:void(0);">リンク3</a></dt>
			<dt><a href="javascript:void(0);">リンク4</a></dt>
			<dt><a href="javascript:void(0);">リンク5</a></dt>
			<dt><a href="javascript:void(0);">リンク6</a></dt>
			<dt><a href="javascript:void(0);">リンク7</a></dt>
			<dt><a href="javascript:void(0);">リンク8</a></dt>
			</dl>
		</div>
		<div class="slide-news-chip">
			<h3>MENUブロック2</h3>
			<dl>
			<dt><a href="javascript:void(0);">リンク1</a></dt>
			<dt><a href="javascript:void(0);">リンク2</a></dt>
			<dt><a href="javascript:void(0);">リンク3</a></dt>
			<dt><a href="javascript:void(0);">リンク4</a></dt>
			<dt><img src="/main/images/hf021.gif" width="81" height="128" /></dt>
			</dl>
		</div>
		<div class="slide-news-chip">
			<h3>MENUブロック3</h3>
			<dl>
			<dt><a href="javascript:void(0);">リンク1</a></dt>
			<dt><a href="javascript:void(0);">リンク2</a></dt>
			<dt><a href="javascript:void(0);">リンク3</a></dt>
			<dt><a href="javascript:void(0);">リンク4</a></dt>
			<dt><a href="javascript:void(0);">リンク5</a></dt>
			<dt><a href="javascript:void(0);">リンク6</a></dt>
			</dl>
		</div>
		<div class="slide-news-chip">
			<h3>MENUブロック4</h3>
			<dl>
			<dt><a href="javascript:void(0);">リンク1</a></dt>
			<dt><a href="javascript:void(0);">リンク2</a></dt>
			<dt><a href="javascript:void(0);">リンク3</a></dt>
			<dt><img src="/main/images/hf015.gif" width="200" height="151" /></dt>
			</dl>
		</div>
		<div class="slide-news-chip">
			<h3>MENUブロック5</h3>
			<dl>
			<dt><a href="javascript:void(0);">リンク1</a></dt>
			<dt><a href="javascript:void(0);">リンク2</a></dt>
			<dt><a href="javascript:void(0);">リンク3</a></dt>
			<dt><a href="javascript:void(0);">リンク4</a></dt>
			<dt><a href="javascript:void(0);">リンク5</a></dt>
			<dt><a href="javascript:void(0);">リンク6</a></dt>
			<dt><a href="javascript:void(0);">リンク7</a></dt>
			<dt><a href="javascript:void(0);">リンク8</a></dt>
			</dl>
		</div>
		</div>
	</div>
	</div>
</div>

上記サンプルの例です。状況に応じ訂正ください。


内部本体だけ使用する場合

どこかに挿入する、適当な「ID」または「クラス」でラップして使用する等は自由です。CSSは随意。


<div id="slide-news-block">
	<div id="number-block"><div id="blink"></div></div>
	<div id="slide-block">
		<div id="slide-inner">
		<div class="slide-news-chip">
			<h3>MENUブロック1</h3>
			<dl>
			<dt><a href="javascript:void(0);">リンク1</a></dt>
			<dt><a href="javascript:void(0);">リンク2</a></dt>
			<dt><a href="javascript:void(0);">リンク3</a></dt>
			</dl>
		</div>
		<div class="slide-news-chip">
			<h3>MENUブロック2</h3>
			<dl>
			<dt><a href="javascript:void(0);">リンク1</a></dt>
			<dt><a href="javascript:void(0);">リンク2</a></dt>
			<dt><a href="javascript:void(0);">リンク3</a></dt>
			</dl>
		</div>
		</div>
	</div>
</div>


JS

slide-inner01.js 適当な名前で保存して使用する。


//slide-inner01.js
//news/setTimeout/anime形式


(function($){

	$(function(){

		//javascriptキャッシュを無効にする
		//window.onunload=function(){}

		//初期設定
		//初期オープン指定番号 1番目=0 2番目=1
		var no=0;// 0-
		//スライド速度 200-800
		var slide_speed=400;

		//タイマーの使用、原則使用する use
		var timer_use="use";// use none
		//タイマー値 5000-10000
		var time=5000;

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

		//変数
		var timerID=null;
		var index_no=0;
		var len=0;
		//mouseが入っている判定
		var mouseIn=false;

		//position関連変数
		var inner_pos=[];
		var pos0=0;
		var menus="";

		//offsetで計算したほうが正確
		$('.slide-news-chip').each(function(i){
			//offset取得
			var offset= $(this).offset();
			var pos_y=offset.top;
			//補正値取得と補正
			if(i == 0){pos0=pos_y;}
			inner_pos[i]=pos_y-pos0;

			//NUMBER-MENU、スイッチ
			//menus += '<span class="news-menu-btn">'+(i+1)+'</span>';
			menus += '<span class="news-menu-btn"></span>';

		});

		//スイッチをappendする
		$('#number-block').append(menus);

		//スライドチップ数
		len=$('#slide-news-block').find('.slide-news-chip').length;

		//オープン指定とタイマーSET
		index_no=no;
		open_set(index_no);//開く
		if (timer_use == 'use') {
			set_timer();
		}

		//スイッチ-click-ACTION
		$('#number-block').find('.news-menu-btn').click(function() {
			var index=$('#number-block').find('.news-menu-btn').index(this);
			index_no=index;
			//指定位置要素を開く
			open_set(index);

		});

		//hover-ACTION、内側に設定
		$('#slide-news-block').hover(
			function() {

				//mouse-in有効
				mouseIn=true;
				clearTimeout(timerID);
				//ブリンク
				$('#blink').removeClass('active');

			},
			function() {

				//mouse-out
				mouseIn=false;
				//タイマーセット
				set_timer();
			}
		);

		//指定位置要素を開く
		function open_set(opno) {

			//飾りactive切り替え
			$('#slide-news-block').find('h3').removeClass('active');
			$('#slide-news-block').find('h3').eq(opno).addClass('active');
			//menuのactive切り替え
			$('#number-block').find('.news-menu-btn').removeClass('active');
			$('#number-block').find('.news-menu-btn').eq(opno).addClass('active');

			//スライドアニメ処理
			$('#slide-inner').animate({'top':inner_pos[opno]*-1},slide_speed);
		}

		//次ぎの開く要素を計算
		function next_set() {

			//次ぎの番号
			index_no +=1;
			if (index_no > (len-1)) {index_no=0;}

			//開く
			open_set(index_no);
			set_timer();

		}
		function set_timer() {

			//mouseが入っていれば実行しない
			if (mouseIn) {return false}
			//タイマー再セット
			if (timer_use == 'use') {
				//一旦切ってからセット
				clearTimeout(timerID);
				timerID=setTimeout(next_set,time);
				//ブリンク
				$('#blink').addClass('active');
			}

		}

	});

})(jQuery);


CSS

外部構造である、#slide-news-box、外部タイトル.slide-news-headクラス、は削除可能です。

slide-inner01.css 適当な名前で保存して使用する。#slide-block の高さ設定のこと。


/* slide-inner01.css 日本語 */

/*-----外部部構造-----*/
#slide-news-box {
	position:relative;
	width:220px;
	height:310px;
	margin:0;
	padding:0;
	text-align:left;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	background-color:#00CED1;
}
#slide-news-box .slide-news-head {
	display:block;
	width:220px;
	height:30px;
}
#slide-news-box .slide-news-head h2{
	width:auto;
	height:30px;
	margin:0;
	padding:0 10px;
	font-size:13px;
	color:#000000;
	line-height:30px;
}


/*-----内部構造-----*/
#slide-news-block {
	display:block;
	width:220px;
	background-color:#FFFFFF;
}

/*番号スイッチ*/
#slide-news-block #number-block {
	position:relative;
	display:block;
	width:auto;
	height:20px;
	background-color:#F8F8FF;
}
#slide-news-block #number-block .news-menu-btn {
	display:inline-block;
	width:10px;
	height:10px;
	margin:5px 0 0 2px;
	background:url(/main/images/swich_btn8c.png) no-repeat;
	background-position:0px 0px;
	cursor:pointer;
}
#slide-news-block #number-block .news-menu-btn:hover {
	background-position:0px -10px;
}
#slide-news-block #number-block .news-menu-btn.active {
	background-position:0px -10px;
}
#slide-news-block #number-block #blink {
	display:none;
	position:absolute;
	right:2px;top:2px;
	width:3px;
	height:3px;
	background:url(/main/images/blink01.gif) no-repeat;
}
#slide-news-block #number-block #blink.active{
	display:block;
}


/*スライド部本体ラップ*/
#slide-news-block #slide-block {
	position:relative;
	left:0;top:0;
	width:auto;
	height:250px;
	background-color:#FFFFFF;
	overflow:hidden;
}

/*スライド部分*/
#slide-block #slide-inner {
	position:absolute;
	left:0;top:0;
	width:200px;
}

/*高さに注意*/
#slide-block #slide-inner .slide-news-chip {
	display:block;
	width:220px;
	height:auto;/*auto*/
	margin:0;
	padding:0;
	background-color:#FFFFFF;
}
#slide-block #slide-inner .slide-news-chip h3 {
	width:auto;
	height:20px;
	margin:0;
	padding:0 0 0 10px;
	background:url(/main/images/arrow_10.gif) no-repeat;
	background-color:#BBBBBB;
	background-position:right 0px;
	line-height:20px;
	color:#FFFFFF;
	font-size:12px;
	cursor:default;/*pointer*/
}

/*-----OPEN指定-----*/
#slide-block #slide-inner .slide-news-chip h3.active {
	background-position:right -21px;
}

/*-------- DL DT -------------*/
#slide-block #slide-inner .slide-news-chip dl {
	display:block;
	width:auto;
	margin:0;
	padding:0;
}
#slide-block #slide-inner .slide-news-chip dl dt {
	list-style:none;
	height:auto;
	margin:1px 5px;
	padding:0;
	text-align:left;
	font-size:12px;
	font-weight:normal;
	line-height:150%;
	border-bottom:1px #CCCCCC solid;
}
#slide-block #slide-inner .slide-news-chip dl dt a {
	text-decoration:none;
	color:#BBBBBB;
}
#slide-block #slide-inner .slide-news-chip dl dt a:hover {
	background-color:#EFEFEF;
	color:#000000;
}
#slide-block #slide-inner .slide-news-chip dl dt a:active {
	color:#555555;
}

「dl dt」及び「ul li」はページのCSSの影響を受ける場合があります。細部は修正ください。
画像パスは環境に合わせてください。


簡単な説明


サンプルは「dl dt」で作成した。dl dtの場合の特性に注意ください。「ul li」でも自由に変更可能です。
jquery-1.6.4.min.js、jquery-1.8.2.min.js、jquery-1.9.0.min.js及びjquery-2.0.0b1.jsでOK


説明図 ALL-SLIDEタイプ

 

高さの設定など

1. 見える部分の高さは #slide-block の高さになります。変更の場合は、図を参考にCSSを変更ください。
2. 中のコンテンツ(slide-news-chipクラス)の高さは auto です。#slide-block の高さにしますと、指定コンテンツのみ見えることになります。
3. 中に画像など挿入の場合は、必ず画像の高さ、幅を記載ください。(offset値の取得が不正確になるため)
4. 外側の、角丸部分 #slide-news-box、お題目 slide-news-headクラスは飾りですから削除できます。本体である #slide-news-block のみで作動可能です。
5. ボタンは自動で作られます。番号付きのほうが良い場合は、下記の説明参照。
6. MENUブロックの矢印は飾りです。前のアコーディオンなどの勢いで付いています。(アクション設定は可能ですが、上にボタンがありますから、、)
7. 初期設定は、JSの先頭をご覧ください。


Hoverとタイマー、キャッシュ機能などの挙動

「キャッシュ機能」のため、挙動に少し違いがありますので理解ください。

1. 開く位置を指定すれば開くことが可能ですが、下記説明の「キャッシュ機能」によりJSの先頭より実行しない時があります。(最後に開いた所に戻る、タイマー停止)
2. 本体をHoverすることによりタイマーは解除されます。Hoverアウトすれば。タイマーが作動します。
3. 何らかの条件で、タイマーが停止した場合に、一旦、Hover後、Hoverアウトすればタイマーが再作動します。
4. ブラウザにもよりますが、次ぎの点を了承ください。(迷惑な機能だ!)


「モダンブラウザ」では「リンクをクリック」して「別ページ」にジャンプ後、ブラウザの「戻る」ボタンで戻った場合に、このJSではタイマーは停止の状態になることがあります。「キャッシュ機能」が働くからです。つまりJSを最初から実行しないで、途中から実行します。但し「IE.Chrome」はキャッシュ機能が無く最初からJSを実行しますので関係はありません。

通常の「Aリンク」で戻る場合は関係ありません。


● 次ぎの方法でキャッシュを解除できます。


onunload実行部分を有効にすればキャッシュされません。但しパフォーマンスなど落ちることあり。


//javascriptキャッシュを無効にする
window.onunload=function(){}

「slide-news-chipクラス」の内部変更

スライドする内部の変更です。現在は「dl dt」で構成していますが「ul li」、「div」でも自由に変更可能です。
タイトル部分は現在は[h3]を使用しています。[h4]等に変更の場合は、JSの該当部分を変更ください。(下記「h3 を h4 に変更する場合」参照)


● 「dl dt」以外にする場合、CSSは当然変更ください。


UL LIで構成の例
<h3>MENUブロック</h3>
<ul>
<li><a href="">リンク</a></li>
<li><a href="">リンク</a></li>
<li><a href="">リンク</a></li>
<li><a href="">リンク</a></li>
</ul>

DIVで構成の例
<h3>MENUブロック</h3>
<div>
<p>説明文などの文章.......<br /><a href="">リンク</p></p>
</div>


● h3以外にする場合、JSの変更が必要です。CSSは当然変更ください。


$('#slide-news-block').find('h3').......

を変更する
$('#slide-news-block').find('h4').......

● 画像を挿入する場合の注意点。

画像を挿入する場合は必ず高さ、幅、を設定すること。大きさの指定が無いと offset() で「コンテンツ位置」を正確に取得出来なくなります。(XHTMLの規定では必ず幅高さを記入しなければならない規定ですが、、)


<img src="/main/images/hf015.gif" width="200" height="151" alt="GAKI" />

● 番号ボタン(TEXT)にする場合。


現在は番号文字が入って居ない
//NUMBER-MENU
//menus += '<span class="news-menu-btn">'+(i+1)+'</span>';
menus += '<span class="news-menu-btn"></span>';

TEXT挿入の形にする、1.2.3...TEXT文字が入る
menus += '<span class="news-menu-btn">'+(i+1)+'</span>';
//menus += '<span class="news-menu-btn"></span>';

CSSの一例


/* 番号ボタン */
#slide-news-block #number-block {
display:block;
width:220px;
height:20px;
background-color:#F8F8FF;
}
#slide-news-block #number-block .news-menu-btn {
display:inline-block;
width:14px;
height:14px;
margin:3px 0 0 2px;
text-align:center;
font-size:10px;
font-weight:bold;
color:#FFFFFF;
line-height:14px;
background-color:#888888;
cursor:pointer;
}
#slide-news-block #number-block .news-menu-btn:hover {
background-color:#FF0000;
}
#slide-news-block #number-block .news-menu-btn.active {
background-color:#FF0000;
}

● コンテンツ部分の高さを一定にする場合。

CSSさえ変更すれば、JSの訂正無くとも、取得offset値と問題がなければ合致しますので作動はします。もし合わない場合はCSSを点検ください。


現在、offset取得で計算しているので、高さは内部の記載事項で決まる。もし「高さを一定」にする場合は offset を取得しなくとも計算できる。この方が簡単で有るから修正しても良い。



offsetで計算
$('.slide-news-chip').each(function(i){
	//offset取得
	var offset= $(this).offset();
	var pos_y=offset.top;
	//補正値取得と補正
	if(i == 0){pos0=pos_y;}
	inner_pos[i]=pos_y-pos0;

	スイッチ省略

});
-------------------------------------

固定値で計算
var inner_h=250;

$('.slide-news-chip').each(function(i){
	inner_pos[i]=inner_h*i;

	スイッチ省略

});

CSSの高さをあわせる
#slide-block #slide-inner .slide-news-chip {
	height:250px;
}

高さを取得しての計算もあるが、margin padding などアルと面倒である。最近は正確に取得の方法もあるようだが不安である。よって、現在、offset取得で計算している。補正が必要であるが、この方が正確である。(displayが有効で表示していること、表示して居ないと取得できないので注意)


画像

サンプル画像 / 原則 使用者が用途に応じてご用意ください。

使用背景画像

背景の位置を変えればデザインの変更が可能です。使用画像以外の画像の場合は使用者がCSSを変更ください。


透過矢印 arrow_10.gif 19x40 透過矢印 arrow_11.gif 19x40 透過陰影スイッチ swich_btn8.png 10x25 (PNG32) 透過陰影スイッチ swich_btn8b.png 10x25 (PNG32) 透過陰影スイッチ swich_btn8c.png 10x25 (PNG32) ブリンク blink01.gif 3x3 ブリンク aani109.gif 9x11 ブリンク aani039.gif 10x10

スイッチボタンなしの、上昇専用タイプです。デザインなどはほぼ同じ。

【参照】当方の記事: jQuery setTimeout自動縦形コンテンツスライダー 下降知らずの上昇専用タイプ

上の、サンプルと似通っていますが、アコーディオンタイプのものです。

【参照】当方の記事: jQuery setTimeout自動開閉アコーディオン


オラの座っている所から3-4メートルの所に「シンドラー」のエレベーターがある。時々変な音がする。オラは乗らない!。(以前、東京で事故った型と同じだ、事故の次ぎの日に「度田舎TV局」が取材に来た。)

以上「シンドラー」型 コンテンツスライダー です。

 


[ この記事のURL ]


タグ:memo , Slider , jquery

 

ブログ記事一覧



[1]