【jQuery】プラグインを使わずに最後まで行くと左に最初まで戻るスライダー
「最後まで行くとスルッと左に最初まで戻る」動きのスライダーを作成したかったのですが、どうもbxslider等のプラグインでできなさそうでしたので、自作してみました。(もしかしたら、できるかもしれませんが…)
わかりにくいので、とりあえずデモみて下さい。
【デモ】
DEMO
スマホでの設置で作成しましたのでレスポンシブのためブラウザ幅でいっぱいになるように設定しています。
また、表示する個数、動く個数、オートスライド、サムネイルなどが設定できるようにしています。
以下、ちょっと長くなるんですがソースになります。
【CSS】
【jQuery】
【HTML】
こんな感じになります。
ただ、
・ブラウザのサイズを変えた場合はサイズは変わりません。
・横にスペースを入れたい場合も対応していません。
など、すべての要望にマッチする作りではありませんので、改良が必要かもです。
とりあえず、スマホで横幅いっぱいで表示したいときはこちらのソースで対応できるかと思います。
わかりにくいので、とりあえずデモみて下さい。
【デモ】
DEMO
スマホでの設置で作成しましたのでレスポンシブのためブラウザ幅でいっぱいになるように設定しています。
また、表示する個数、動く個数、オートスライド、サムネイルなどが設定できるようにしています。
以下、ちょっと長くなるんですがソースになります。
【CSS】
.reslider { overflow:hidden; position:relative; margin:0 0 20px; } .reslider div { position:relative; } .reslider div ul:nth-of-type(1) { position:relative; left:0px; } .reslider img { width:100%; } .reslider div ul:nth-of-type(1) li { float:left; } .reslider > ul li { float:left; cursor:pointer; } .reslider > ul li.on img { opacity:0.5; } .mxprev { position:absolute; top:50%; left:0px; background-image:url(/img/return_btn.png); width:50px; height:50px; text-indent:-9999px; margin:-25px 0 0 0; } .mxnext { position:absolute; top:50%; right:0px; background-image:url(/img/next_btn.png); width:50px; height:50px; text-indent:-9999px; margin:-25px 0 0 0; }
【jQuery】
$(function(){ //reslider(IDナンバー,表示個数,移動個数,オート) reslider(1,1,1,true); reslider(2,3,1,true); function reslider(ncode,disnum,movnum,auto){ //reslider_box var sncode = '#reslider' + ncode ; //サイト幅 var nwwidth = $(window).width() ; //画像の数 var lilength = $(sncode+' div ul:nth-of-type(1) li').length ; //表示個数 var licnt = disnum ; //移動個数 var movecnt = movnum ; //表示画面中のliの数 var nwliwidth = nwwidth / licnt ; //resliderの長さを指定 $(sncode+' ul').width(lilength * nwliwidth) ; //liの幅 $(sncode+' li').width(nwliwidth); //移動距離 var movdis = nwliwidth * movecnt ; //初期位置 var iniposi = 0; //スクロールスピード var nuspeed = 500 ; //自動時間 var autimeh = 4000 ; //クリックフラグ var click_flg = true ; //自動 var autotime = auto ; //移動位置 var moveposi = 0 ; //戻り位置 var stposi = -(lilength * nwliwidth - nwwidth) ; //次へ var nextbtn = $(sncode+' div ul:nth-of-type(1)').nextAll('.mxnext'); //前へ var prevbtn = $(sncode+' div ul:nth-of-type(1)').nextAll('.mxprev'); //サムネ数 var scount = $(sncode+' > ul li').length ; //サムネ幅 $(sncode+' > ul li').width(nwwidth/scount); //動いた数 var movecount = 0 ; //タッチイベント $(sncode+' div ul:nth-of-type(1)').on('touchstart', onTouchStart); $(sncode+' div ul:nth-of-type(1)').on('touchmove', onTouchMove); $(sncode+' div ul:nth-of-type(1)').on('touchend', onTouchEnd); var position ; var direction ; //右に進む function rightmove() { movecount = -(moveposi / movdis) + 1 ; $(sncode+' > ul li').removeClass('on'); $(sncode+' > ul li').eq(movecount).addClass('on'); $(sncode+' div ul:nth-of-type(1)').animate({ 'left':moveposi-movdis },{ duration:nuspeed, complete : function() { moveposi = moveposi-movdis ; click_flg = true ; } }); } //左に進む function leftmove(){ movecount = -(moveposi / movdis) - 1 ; $(sncode+' > ul li').removeClass('on'); $(sncode+' > ul li').eq(movecount).addClass('on'); $(sncode+' div ul:nth-of-type(1)').animate({ 'left':moveposi+movdis },{ duration:nuspeed, complete : function() { moveposi = moveposi+movdis ; click_flg = true ; } }); } //最初に戻る function remove(){ movecount = 0 ; $(sncode+' > ul li').removeClass('on'); $(sncode+' > ul li').eq(movecount).addClass('on'); $(sncode+' div ul:nth-of-type(1)').animate({ 'left':iniposi },{ duration:nuspeed, complete : function() { moveposi = iniposi ; click_flg = true ; } }); } //タッチスタート function onTouchStart(event) { position = getPosition(event); }; //タッチ左右判定 function onTouchMove(event) { direction = (position > getPosition(event)) ? "left" : "right"; }; //タッチの動き取得 function getPosition(event) { return event.originalEvent.touches[0].pageX; } //タッチ終了振り分け function onTouchEnd(event) { //左 if(direction=="left"){ if(click_flg){ click_flg = false ; if(moveposi>stposi){ rightmove(); }else{ remove(); } } //右 }else{ if(click_flg){ click_flg = false ; if(moveposi<0){ leftmove(); }else{ click_flg = true ; } } } }; //オートの動き var autoslider = function(){ if(click_flg){ click_flg = false ; if(moveposi>stposi){ rightmove(); }else{ remove(); } } } //次へボタンを押したとき $(nextbtn).on('click',function(){ if(click_flg){ click_flg = false ; if(moveposi>stposi){ rightmove(); }else{ remove(); } } }); //前へボタンを押したとき $(prevbtn).on('click',function(){ if(click_flg){ click_flg = false ; if(moveposi<0){ leftmove(); }else{ click_flg = true ; } } }); //サムネイルクリック $(sncode+' > ul li').on('click',function(){ var sncount = $(sncode+' > ul li').index(this); $(sncode+' > ul li').removeClass('on'); $(sncode+' > ul li').eq(sncount).addClass('on'); $(sncode+' div ul:nth-of-type(1)').animate({ 'left':-(movdis * sncount) },{ duration:nuspeed, complete : function() { moveposi = -(movdis * sncount) ; click_flg = true } }); }); //自動 if(autotime){ startes = setInterval(autoslider,autimeh); } } });
【HTML】
■画像1つ サムネイルあり<br> <div id="reslider1" class="reslider"> <div> <ul class="clearfix"> <li><img src="/img/banner.jpg" alt=""></li> <li><img src="/img/banner2.jpg" alt=""></li> <li><img src="/img/banner3.jpg" alt=""></li> </ul> <a class="mxprev">前へ</a> <a class="mxnext">次へ</a> </div> <ul> <li class="on"><img src="/img/banner.jpg" alt=""></li> <li><img src="/img/banner2.jpg" alt=""></li> <li><img src="/img/banner3.jpg" alt=""></li> </ul> </div> <br> ■画像3つ サムネイルなし<br> <div id="reslider2" class="reslider"> <div> <ul class="clearfix"> <li><img src="/img/banner.jpg" alt=""></li> <li><img src="/img/banner2.jpg" alt=""></li> <li><img src="/img/banner3.jpg" alt=""></li> <li><img src="/img/banner.jpg" alt=""></li> <li><img src="/img/banner2.jpg" alt=""></li> <li><img src="/img/banner3.jpg" alt=""></li> </ul> <a class="mxprev">前へ</a> <a class="mxnext">次へ</a> </div> </div>
こんな感じになります。
ただ、
・ブラウザのサイズを変えた場合はサイズは変わりません。
・横にスペースを入れたい場合も対応していません。
など、すべての要望にマッチする作りではありませんので、改良が必要かもです。
とりあえず、スマホで横幅いっぱいで表示したいときはこちらのソースで対応できるかと思います。
著者:poroa | 投稿日:2016年11月25日 | カテゴリ:jQuery