POPSブログ

jQuery setTimeout自動縦形コンテンツスライダー 下降知らずの上昇専用タイプ

205

  Category:  jquery2013/02/21 pops 

下降なしの、疲れを知らない上昇専用タイプ、setTimeout付きの自動上昇「コンテンツスライダー」なのだ。昇れ昇れ、宇宙のはてまでイッテQ。

 

jQuery setTimeout自動縦形コンテンツスライダー 上昇専用タイプ、animate()方式

前ページのものを上昇専用に改造しました。タイトル(ボタン)を押せば繰り上がりますが、降ることをしらない不器用ものです。マウスが内部に入るとタイマー停止します。マウスが欄外に出ますと自動でタイマーがセットされ動きだします。高さは固定形式です。CSSで自由な高さに設定します。
タイマーを使用しない場合は、タイトル(ボタン)操作のみ可能です。


Example


SLIDE-NEWS (ALL-SLIDE 2)

コンテンツ、MENUブロック部分、(HOVERタイマー解除、OUTタイマー再設定)


[HOVERの状態] false


重要、逃すとまた現れるまで時間がかかります。「ジッと待つ」冷静な心構えが必要です。


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


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

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



HTML JS CSS


HTML

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


<div id="slide-news-box">
	<div class="slide-news-head"><h2>宇宙のはてまでイッテQ</h2></div>
	<div id="slide-news-block">
	<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><p class="align-center"><img src="/main/images/gkf509s.gif" width="200" height="100" /></p></dt>
			<dt><a href="javascript:void(0);">リンク4</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><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ブロック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>
			</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><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ブロック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>
			</dl>
		</div>
		</div>
	</div>
	</div>
</div>

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


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

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


<div id="slide-news-block">
	<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-inner02.js 適当な名前で保存して使用する。


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


(function($){

	$(function(){

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

		//初期設定

		//チップの高さ、必ず記入のこと
		var inner_h=250;

		//初期オープン指定番号 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;
		//ラスト判定
		var last=false;

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

		//クローン、形だけ表示のため、clone(true)は必要で無い
		var block=$('.slide-news-chip').eq(0).clone();
		$('#slide-inner').append(block);

		//固定高さ計算
		$('.slide-news-chip').each(function(i){
			inner_pos[i]=inner_h*i;

		});

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

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

		//h3-click-ACTION
		$('#slide-news-block').find('h3').click(function() {
			var index=$('#slide-news-block').find('h3').index(this);
			index_no=index;
			//次ぎの要素を開く
			next_set();

		});

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

				//mouse-in有効
				mouseIn=true;
				clearTimeout(timerID);

			},
			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');

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

				//クローンが表示されたらTOPに移動、正規のものと差し替え
				if (last) {
					$('#slide-inner').css({'top':0});
					last=false;
					//番号を戻す
					index_no=0;
					//飾りactive切り替え
					$('#slide-news-block').find('h3').removeClass('active');
					$('#slide-news-block').find('h3').eq(index_no).addClass('active');
				}
			});

		}

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

			//次ぎの番号
			index_no +=1;
			if (index_no > (len-1)) {index_no=0;}//使用していない
			//ラスト判定
			if (index_no == len-1) {last=true;}

			//開く
			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);
			}

		}

	});

})(jQuery);


CSS

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

slide-inner02.css 適当な名前で保存して使用する。#slide-block、.slide-news-chipクラスの高さ設定のこと。


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

/*-----外部部構造-----*/
#slide-news-box {
	position:relative;
	width:220px;
	height:290px;
	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 #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:250px;
	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*/
}
#slide-block #slide-inner .slide-news-chip h3:hover {
	background-color:#888888;
}

/*-----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


高さの設定など

1. 見える部分の高さは #slide-block の高さになります。変更の場合は、図を参考にCSSを変更ください。スライド部本体ラップ #slide-block、中の要素部分 .slide-news-chipクラスは同じ値になります。
2. JSの設定で、高さを記入ください(inner_h)。誤差が出る場合があるので自動で読み取りません。
3. 外側の、角丸部分 #slide-news-box、お題目 slide-news-headクラスは飾りですから削除できます。本体である #slide-news-block のみで作動可能です。
4. MENUブロックの矢印は飾りです。前のアコーディオンなどの勢いで付いています。MENUブロックはボタン代わりになっています。
5. 初期設定は、JSの先頭をご覧ください。
6. 本当は1階層削れるのですが、JS切り替えなど考慮して、前ページのものとほぼ同じ構造にしました。(スイッチブロック無し)


上昇だけの仕組み

1. 上昇だけスライドを続ければ最後に無くなりますから、「最後の後」に最初の、slide-news-chipクラスをコピーして連結しています。
2. コピーした最後がスライド終了後に、最初のslide-news-chipクラスと摩り替えて「シランフリ」しています(ポジションを 0 にしているだけ)。連続している様に見えます。
3. コピー部はスライド終了までの短時間、単に見えればよいので、clone()で処理しています。


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').......

● 効率化について

JSで、$('#slide-news-block')の部分などは、複数箇所処理していますので、オブジェクトをキャッシュして効率化することが可能です。幾分実行が早くなります。
但し、#slide-block を基準としても処理出来ます。入れ子が1つ多いのは、構造を前のページと一緒にしたための弊害です。


JS、上部でキャッシュする、変数は随意

var newsblock=$('#slide-news-block');
var slideinner=$('#slide-inner');

以下該当部分を差し替える

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

$('#slide-inner').animate.............
は
slideinner.animate.............
等となる

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

画像を挿入する場合は原則、高さ、幅、を記載します。


<img src="/main/images/gkf509s.gif" width="200" height="100" alt="" />

画像

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

使用背景画像

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


透過矢印 arrow_10.gif 19x40 透過矢印 arrow_11.gif 19x40

同じコンテンツスライダー下降付きのもの。ボタンで好きな箇所を開くことが可能です。

【参照】当方の記事: jQuery setTimeout自動縦形コンテンツスライダー ALL-SLIDEタイプ

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

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


以上です。

 


[ この記事のURL ]


タグ:jquery , Slider , memo

 

ブログ記事一覧



[1]