どもです。
美容院で見つけた漫画が思いの外面白くて翌日に中古本屋に行った餅。です。
大判とはいえ一冊360円はやけに高いな…と思ったら、普通に現在も連載中の漫画でした。
美容院の漫画って古いものが置いてあるという思い込みがあったようです。
なんか悔しかったので既刊全部買って帰りました。財布が寒い…
さて、前々回はカルーセルでしたが、
今回は割と万能なスライドショーのソースを晒します。
// JavaScript Document
$(window).load(function(){
var productHow = $('スライド本体の画像').length; // カルーセルの数
var productno = 1 ; // カルーセルの現在番号
var slidflug = 1 ;
setInterval(function() {
if(slidflug === 1 ){
if(productno >= productHow){
productno=1;
}else{
productno++;
}
$("スライド本体の画像:not(:nth-of-type("+ productno +"))").css( "opacity", 0 );
$("スライド本体の画像:nth-of-type("+ productno +")").css( "opacity", 1 );
}else{
slidflug = 1 ;
}
}, 4000); //スライド時間間隔（個別調整）
$("前へボタン").click(function () {
if(productno === 1 ){
productno = productHow;
}else{
productno--;
}
$("スライド本体の画像:not(:nth-of-type("+ productno +"))").css( "opacity", 0 );
$("スライド本体の画像:nth-of-type("+ productno +")").css( "opacity", 1 );
slidflug = 0 ;
});
$("次へボタン").click(function () {
if(productno >= productHow){
productno=1;
}else{
productno++;
}
$("スライド本体の画像:not(:nth-of-type("+ productno +"))").css( "opacity", 0 );
$("スライド本体の画像:nth-of-type("+ productno +")").css( "opacity", 1 );
slidflug = 0 ;
});
$("サムネイル").click(function () {
productno = $("サムネイル").index(this) +1;
$("スライド本体の画像:not(:nth-of-type("+ productno +"))").css( "opacity", 0 );
$("スライド本体の画像:nth-of-type("+ productno +")").css( "opacity", 1 );
slidflug = 0 ;
})
});
スライドっていうかフェードで切り替わるのですが、これって何と呼ぶのでしょう？
スライドのが良いっていう場合は前回のカルーセルを使えばいけます。
スライドとカルーセル両対応。
CSSとしては、スライドはposition:absoluteで重ねてopacityで透明化。
transition:1s辺りをつけて切り替えをフェード化します。
ただし、これだとリンクは貼れないので、リンク貼りたい場合は
.css( "opacity", 0 ); → .fadeOut("slow")
.css( "opacity", 1 ); → .fadeIn("slow")
に変更します。
但し、これを設定すると切り替わりの際に一瞬、「要素が存在しない時間」ができてしまいます。
そのままだと切り替わりの度に下の要素が動いてしまうので、
・親要素にheightを指定する
・スライドの後ろに透明の画像を設置する
などを行って、スライドに高さを与えてください。
サムネイルをクリックすることで、クリックされたサムネイルの順番を取得して、
同じ順番の本体画像に切り替えます。
サムネイルでなく、ボタンを設置したい場合はこちら。
// JavaScript Document
$(function(){
var productHow = $('スライドする画像').length; // カルーセルの数
var productno = 1 ; // カルーセルの現在番号
var slidflug = 1 ;
setInterval(function() {
if(slidflug === 1 ){
if(productno >= productHow){
productno=1;
}else{
productno++;
}
$("スライドする画像:not(:nth-of-type("+ productno +"))").fadeOut("slow");
$("スライドする画像:nth-of-type("+ productno +")").fadeIn("slow");
$("ボタンを設置する要素 span:not(:nth-of-type("+ productno +"))").removeClass("now");
$("ボタンを設置する要素 span:nth-of-type("+ productno +")").addClass("now");
}else{
slidflug = 1 ;
}
}, 4000); //スライド時間間隔（個別調整）
if( productHow > 1){
for (var i=1 ; i <= productHow ; i++){
if(i==1){
$("ボタンを設置する要素").append('<span class="now"></span>');
}else{
$("ボタンを設置する要素").append('<span></span>');
}
}
}
$("ボタンを設置する要素 span").click(function () {
productno = $("ボタンを設置する要素 span").index(this) +1;
$("スライドする画像:not(:nth-of-type("+ productno +"))").fadeOut("slow");
$("スライドする画像:nth-of-type("+ productno +")").fadeIn("slow");
$("ボタンを設置する要素 span:not(:nth-of-type("+ productno +"))").removeClass("now");
$("ボタンを設置する要素 span:nth-of-type("+ productno +")").addClass("now");
slidflug = 0 ;
})
});
画像の数を読み取って、同じ数の<span></span>を自動的に生成します。
選択中のボタンには.nowがつくので、CSSを調整してください。
ちなみに、.fadeOut("slow")・.fadeIn("slow")を使う場合は、画像のパスとは「スライド一枚分の要素」と解釈することになります。
aタグやliタグで画像を囲っている場合は、それへのパスを入力してください。