スライドイメージ系
今まで作ってきた自作のjavascriptをまとめてみました。jquery-3.3.1を使用しています。まだまだ未熟のうえ開発途中なので時間を見ては直していくつもりです。
また、こちらのサイトはレスポンシブではなくPCデバイスのみにしています。IEやEdgeは考慮しなかったのでSVGも使いました。
デザインはシンプルに、記事メインの仕様で考えました。
フェードスライド
fadeOutのスライドショーです。画像はサムネの数から配列を作り出してliを2個書出し。重ねて上のliをfadeOutさせます。インデックスはサムネliと画像liを共通のnum変数にして紐づけています。
テストなのでスライドスピードは早めに2秒で設定。
HTML
<div id="slide2">
<ul id="photo2">
<!-- サムネから配列作って書出し-->
</ul>
<div id="leftspace2"><i class="fas fa-angle-left"></i></div>
<div id="rightspace2"><i class="fas fa-angle-right"></i></div>
</div>
<ul id="pager2">
<li><i class="fas fa-square-full"></i>
<li><i class="fas fa-square-full"></i>
<li><i class="fas fa-square-full"></i>
<li><i class="fas fa-square-full"></i>
<li><i class="fas fa-square-full"></i>
</ul>
Js
//フェードスライド
const thumLi = jQuery('#pager2 li');//サムネイルli変数
const thumb = jQuery('#pager2').find('li');
const imgUl = jQuery('#photo2');//画像のul
//画像の数を取得
const imgNum = thumb.length;
//liの画像の配列を作る
let imgItem = [];
//インデックス初期値
let num = 0;
let timerID;
//配列書出し
for(let i=0; i < imgNum; i++){
imgItem.push('<img src="image/imag0'+(i+1)+'.jpg">');
}
//#photo ulのliを1つ書き出す
imgUl.append('<li>'+imgItem[0]+'</li>');
//activeを付ける
thumLi.eq(0).addClass('active');
//フェードスライド関数
function fedeStart(){
//画像が最大値になったら最初に戻して繰り返し
num = ++num % imgNum;
imgUl.prepend('<li>'+imgItem[num]+'</li>');
thumLi.removeClass('active');
thumLi.eq(num).addClass('active');
jQuery('li:last-child',imgUl).stop().fadeOut(600,
function(){
//1つ目以外のliを消す
jQuery('li:nth-child(n+2)',imgUl).remove();
timerID = setTimeout(fedeStart,2000);
});
}
//次へ
jQuery('#rightspace2').on('click',function(){
clearTimeout(timerID);
fedeStart();
});
//戻る
jQuery('#leftspace2').on('click',function(){
clearTimeout(timerID);
//現在の画像データを調べる
let nowImg = jQuery('li:last-child',imgUl).html();
let nowIndex = imgItem.indexOf(nowImg);
//現在の画像の一つ前にする
--nowIndex;
if(nowIndex < 0){ nowIndex = imgNum-1; }
console.log(nowIndex);
thumLi.removeClass('active');
thumLi.eq(nowIndex).addClass('active');
imgUl.prepend('<li>'+imgItem[nowIndex]+'</li>');
jQuery('li:last-child',imgUl).stop().fadeOut(300,
function(){
jQuery('li:nth-child(n+2)',imgUl).remove();
//フェード再スタート
num = nowIndex;
timerID = setTimeout(fedeStart,2000);
});
});
//ページャークリック
thumLi.on('click',function(){
let index = thumLi.index(this);
clearTimeout(timerID);
num = index;
thumLi.removeClass('active');
thumLi.eq(num).addClass('active');
imgUl.prepend('<li>'+imgItem[num]+'</li>');
jQuery('li:last-child',imgUl).stop().fadeOut(300,
function(){
//1つ目以外のliを消さないと順番がおかしくなる
jQuery('li:nth-child(n+2)',imgUl).remove();
timerID = setTimeout(fedeStart,2000);
});
});
setTimeout(function(){
fedeStart(); },3000 );
横スライド
横にスライドしていくパターンです。動きを滑らかにする為easing.1.3.jsを使用
HTML
<div id="topPanel">
<div id="slide">
<ul id="photo" class="clearfix">
<li><src="image/imag05.jpg"></li>
<li><src="image/imag01.jpg"></li>
<li><src="image/imag02.jpg"></li>
<li><src="image/imag03.jpg"></li>
<li><src="image/imag04.jpg"></li>
</ul>
<div id="leftspace"></div>
<div id="rightspace"></div>
<p id="prev"><i class="fas fa-angle-left"></i></p>
<p id="next"><i class="fas fa-angle-right"></i></p>
</div>
<ul id="pager"><!-- ページャーはイメージの数をeachで書出し--></ul>
</div>
Js
//横スライド
const imgUl = '#photo';//画像のul
const imgArray = jQuery(imgUl).find('li');//画像の配列
const imgLi = '#photo li';//画像のli
const imgNum = imgArray.length;//画像の枚数
//ページャーli書出し
jQuery('#pager').each(function(){
for(let i = 0; i < imgNum; i++){
jQuery(this).append('<li><i class="fas fa-square-full"></i></li>');
if(jQuery('li:first-child',this)){
jQuery('#pager li:first-child').addClass('active');
}//最初だけactiveをつけておく
}
});
let panelw = 700;//PC画像と真ん中のパネル幅サイズ
let panelh = 460;//PC画像と真ん中のパネル高さサイズ
let navh = 40;//PCナビのサイズ
let onSlide = panelw;//移動サイズの変数
let timerID;//タイマー設定
// レスポンシブ設定
jQuery(window).on('load resize',function(){
let imgw = jQuery('img',imgLi).width();//画像の幅サイズ取得
let imgh = jQuery('img',imgLi).height();//画像の高さ取得
let photow = jQuery(window).width();//ウィンドウサイズ
let photoh = imgh / imgw * photow;//画像のサイズに合わせて高さを算出
function smSize(){
jQuery('#slide').width(photow).height(photoh);//スマホのパネルサイズ
jQuery(imgUl).width(imgw*imgNum).height(photoh).css('left',photow*-1 );
jQuery('img',imgLi).width( photow ).height( photoh );//画像のサイズ
jQuery('#prev').css({'top': (photoh - 40)/2 ,'left':'0px'});//ナビの場所
jQuery('#next').css({'top': (photoh - 40)/2 ,'right':'0px'});
onSlide = photow;//slide関数で使うスマホ移動サイズ
}
function pcSize() {
jQuery('#slide').width(panelw).height(panelh);//PCのパネルサイズ
jQuery(imgUl).width(panelw*imgNum).height(panelh).css('left',panelw*-1);
jQuery('img',imgLi).width(panelw).height(panelh);
jQuery('#prev').css({'top': (panelh - navh)/2 ,'left':'-40px'});
jQuery('#next').css({'top': (panelh - navh)/2 ,'right':'-40px'});
onSlide = panelw;//slide関数で使うPC移動サイズ
}
if( window.innerWidth < 768 ) {
smSize();
} else {
pcSize();
}
});
const samList =jQuery('#pager').find('li');//オリジナルページャー配列
let num = 0; //現在表示されているインデックス
//スライダー関数
function slide(){
jQuery(imgUl).stop().animate({'left': onSlide*-2},'slow','linear',
function(){
jQuery(this).css('left',onSlide*-1).append(jQuery('li:first-child',this));
num = ++num % samList.length;
jQuery(samList[num]).addClass('active').siblings().removeClass('active');//オリジナルページャー設定
});
}
//次へ
jQuery('#next').on('click',function(){
clearInterval(timerID);
slide();
timerID = setInterval(slide,3000);
});
//前へ
jQuery('#prev').on('click',function(){
clearInterval(timerID);
jQuery(imgUl).prepend(jQuery('li:last-child',imgUl)).css('left',onSlide*-2).stop().animate({'left': onSlide*-1},'slow','linear',
function(){
num = --num;
if(num < 0){ num = samList.length-1; }
jQuery(samList[num]).addClass('active').siblings().removeClass('active');
});
timerID = setInterval(slide,3000);
});
//ページャークリック画像取得用の配列
let listArray = [];
for(let i=0; i < imgNum; i++){
listArray.push('<li><img src="image/imag0'+(i+1)+'.jpg"></li>');
}
listArray.push('<li><img src="image/imag0'+1+'.jpg"></li>');
listArray.push('<li><img src="image/imag0'+2+'.jpg"></li>');
//ページャークリック
jQuery('#pager li').on('click',function() {
let index = jQuery('#pager li').index(this); //クリックされたliを取得
jQuery(this).addClass('active').siblings().removeClass('active'); //押されたページャーをアクティブ
//クリックしたイメージに置き換える
switch(index){
case 0:
jQuery(imgUl).html(listArray[imgNum-1]+listArray[index]+listArray[index+1]+listArray[index+2]+listArray[index+3]);
break;
default:
jQuery(imgUl).html(listArray[index-1]+listArray[index]+listArray[index+1]+listArray[index+2]+listArray[index+3]);
}
num = index;
clearInterval(timerID); //一旦クリアにする
timerID = setInterval(slide,3000);
});
//自動タイマー設定
timerID = setInterval(slide,3000);
スライドパネル手動式
ネットショップでよく見る手動式スライド。1個づつ画像がスライドして画像をクリックすると拡大します。
閉じる
HTML
<div id="pagewrap">
<div id="panelFram">
<ul id="sliderPanel">
<li><a href="image/imag01.jpg"><img src="image/imag01.jpg"></a></li>
<li><a href="image/imag02.jpg"><img src="image/imag02.jpg"></a></li>
<li><a href="image/imag03.jpg"><img src="image/imag03.jpg"></a></li>
<li><a href="image/imag04.jpg"><img src="image/imag04.jpg"></a></li>
<li><a href="image/imag05.jpg"><img src="image/imag05.jpg"></a></li>
<li><a href="image/imag06.jpg"><img src="image/imag06.jpg"></a></li>
<li><a href="image/imag07.jpg"><img src="image/imag07.jpg"></a></li>
<li><a href="image/imag08.jpg"><img src="image/imag08.jpg"></a></li>
</ul>
</div>
<p id="prev_w"><i class="fas fa-angle-left"></i></p>
<p id="next_w"><i class="fas fa-angle-right"></i></p>
</div>
<!-- モーダルウィンドウ -->
<div id="pickUp">
<img src="image/imag01.jpg">
<p class="close"><i class="fas fa-times"></i>閉じる</p>
</div>
Js
//スライドパネル手動式
//prevボタン非表示
jQuery('#prev_w').css('display','none');
let oneSpace;//スライドの幅
let moveSpace;//pcとスマホの移動幅の取得
const panel = jQuery('#sliderPanel');
const prev = jQuery('#prev_w');
const next = jQuery('#next_w');
//レスポンシブ設定
if( window.innerWidth <768 ){
oneSpace = 170;
moveSpace = oneSpace*-5;
} else {
oneSpace = 300;//#sliderPanel liの幅
moveSpace = oneSpace*-4;
}
next.on('click',function(){
panel.stop().animate({'left': '-='+oneSpace},'300','swing');
//ナビゲーション表示非表示
prev.fadeIn('slow');
//position leftの値を取得
slideLeft = parseInt(panel.css('left'));
//leftが最大値に達したらnextボタンを消す
if(slideLeft <= moveSpace){
next.fadeOut();
}
console.log(slideLeft);
});
prev.on('click',function(){
panel.stop().animate({'left': '+='+oneSpace},'300','swing');
//ナビゲーション表示非表示
next.fadeIn('slow');
//position leftの値を取得
slideLeft = parseInt(panel.css('left'));
//leftが0に達したらprevボタンを消す
if(slideLeft >= -oneSpace){
prev.fadeOut();
}
console.log(slideLeft);
});
//拡大ウィンドウ表示
jQuery('li a',panel).on('click',function(){
jQuery('#pickUp img').attr('src',jQuery('img',this).attr('src'));
jQuery('#pickUp').fadeIn('slow');
return false;
});
//閉じるボタン
jQuery('.close').on('click',function(){
jQuery('#pickUp').fadeOut('slow');
});
パネル一覧モーダルめくり
サムネイル一覧の画像をクリックするとモーダルウィンドウが表示され、ナビゲーションでスライドフェードします。
閉じる
HTML
<ul id="thumbPanel">
<li><a href="image/imag01.jpg"><img src="image/imag01.jpg"></a></li>
<li><a href="image/imag02.jpg"><img src="image/imag02.jpg"></a></li>
<li><a href="image/imag03.jpg"><img src="image/imag03.jpg"></a></li>
<li><a href="image/imag04.jpg"><img src="image/imag04.jpg"></a></li>
<li><a href="image/imag05.jpg"><img src="image/imag05.jpg"></a></li>
<li><a href="image/imag06.jpg"><img src="image/imag06.jpg"></a></li>
<li><a href="image/imag07.jpg"><img src="image/imag07.jpg"></a></li>
<li><a href="image/imag08.jpg"><img src="image/imag08.jpg"></a></li>
</ul>
<div id="modalUp">
<img class="mainImg" src="image/imag01.jpg">
<p class="prev"><i class="fas fa-angle-left"></i></p>
<p class="next"><i class="fas fa-angle-right"></i></p>
<p class="close"><i class="fas fa-times"></i>閉じる</p>
</div>
Js
//パネル一覧モーダルめくり
const modal = jQuery('#modalUp');//モーダルウィンドウ
const thumImg = jQuery('#thumbPanel li');//サムネイルli
const imgNum = thumImg.length;//画像の全枚数
thumImg.on('click',function(index){
jQuery('.mainImg:last-of-type').attr('src',jQuery('img',this).attr('src'));
modal.stop().fadeIn('slow');
return false;
});
//閉じるボタン
jQuery('.close',modal).on('click',function(){
modal.stop().fadeOut('slow');
});
//画像を配列化
let item =[];
for(let i = 0; i< imgNum; i++){
item.push('image/imag0'+(i+1)+'.jpg');
}
//nextボタンの処理
jQuery('.next',modal).on('click',function(){
//現在の画像を取得
let panelImg = jQuery('.mainImg').attr('src');
//item配列のインデックスを検索
let itemNum = item.indexOf(panelImg);
//最大値に達したら最初に戻す
itemNum = ++itemNum % imgNum;
modal.prepend('<img class="mainImg" src="'+item[itemNum]+'">');
jQuery('.mainImg:last-of-type').stop().fadeOut('slow',
function(){
jQuery(this).remove();
});
});
//prevボタンの処理
jQuery('.prev',modal).on('click',function(){
let panelImg = jQuery('.mainImg').attr('src');
let itemNum = item.indexOf(panelImg);
itemNum--;
//最小値になったら最大値にする
if(itemNum < 0){ itemNum = item.length-1; }
modal.prepend('<img class="mainImg" src="'+item[itemNum]+'">');
jQuery('.mainImg:last-of-type').stop().fadeOut('slow',
function(){
jQuery(this).remove();
});
});
