簡易SLIDESHOW-1、色々なエフェクトを持った、簡易ページャー付きスライドショーです。
簡易SLIDESHOW-1
pops-slideshow-01.js
簡易ページャー付きスライドショー、サンプル表示
- 1
- 2
- 3
- 4
HTML構造を直接書きますが、画像はJS側スクリプトに記述します。
- ページャー、メニュー機能を付加しました。
- 簡易記述方式のJSです。読み込めば直ぐ実行します。
- サイクルタイムは、JSで2種設定できます。書き換えてください。
(スタートまでの時間、サイクル、スライドの時間など、画像の大きさ状況にあわせる) - JSで必要な設定をして上書き保存する。
- 画像は個人で、5-10枚用意ください。
- 画像名、画像までのパスはJSに記載します、随時ロード形式です。
(その都度、画像をロードしますので、画像転送量を少し抑えることができます) - 画像の大きさで、CSSをも変更ください。
- 用途が広がります、複数の設置は原則できません。
- IE8 はキレイに動作しません。Google Chrome を利用ください。
簡単な動作の説明
ページャー、オンオフボタンのメニュー機能を付加すれば、「スライドショー」になります。アルバム、TOPページ用途としても使用可能です。
初期設定では、番号つきのページャーですが、サムネール画像を入れることも可能です。
簡易ページャーの説明
オンオフボタンなし、番号ボタンのみの「簡易ページャー」方式の簡単なものです。但し、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) {
//クリックされたら指定番号画像をLOAD
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();
}
};
設置方法
簡易JS記述、間違いの少ない、setTimeout の通常方式で記述しています。なお、設置するページが違えば、別画像ででも使用できま すが、画像の大きさが違えば別のCSS名で新たに作ってリンクしてください。
[ 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;" />
注意、原則、全画像はJSに登録します。画像伸縮のため幅高さを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) {
//クリックされたら指定番号画像をLOAD
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() {
//下画像に新しいURLセット
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はない
//上層移動とURLの代入
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、次ぎ画像のLOAD
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;
}
以上です。
[ この記事のURL ]