web creating

POROA



【jQuery】プラグインを使わずに最後まで行くと左に最初まで戻るスライダー

「最後まで行くとスルッと左に最初まで戻る」動きのスライダーを作成したかったのですが、どうもbxslider等のプラグインでできなさそうでしたので、自作してみました。(もしかしたら、できるかもしれませんが…)

わかりにくいので、とりあえずデモみて下さい。
【デモ】
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日
■最新記事
■カテゴリ一覧
CSS
Excel
Google Analytics
HTML
jQuery
PHP
SEO
WordPress
ホームページ作成
ホームページ作成講座
未分類
■アーカイブ
2016年12月
2016年11月
2016年10月
2016年9月
2016年8月
■ランキング