JqueryスライドショーDIY

はじめに

このネットワークには非常に多くの既製のスライドショーがあり、写真を追加するだけで、さまざまなアニメーションを使用してその変化を楽しむことができます。 それらを見て、私はこの自転車を自分で発明したかったのです。 体積効果なしなど 最も一般的なスライドショー。

仕組み

操作の原理は簡単です。「より本格的な」ブロックをスライドのサイズに一致するブロックに入れ、そこに左側に配置された画像（float：left）をパックします。 。

例

これがデモです。

実装

スライドサイズ371x199pxを選択しました。
まず、HTMLとCSSを作成し、そこから引き続き依存します。

<div id="slideshow"> <div id="slideimages"> <img class="slideimage" src="/img/slides/0.jpg" id="1" data-title=" "> <img class="slideimage" src="/img/slides/1.jpg" id="2" data-title=" "> </div> <div id="controlrow"> <span id="slidecounter"></span> <!--  --> <div id="slidetitle"></div> <!-- --> <div id="slidecontrollers"> <div class="imtype" id="rew"></div> <!-- --> <div class="imtype pause" id="play-pause"></div> <!-- /--> <div class="imtype" id="few"></div> <!-- --> </div> </div> </div> 

 #slideshow { position:relative; /*   div#slidecontrollers*/ overflow:hidden; /*        div#slideimages*/ width:371px; /**/ height:199px; font-size:0; } #controlrow { position:absolute; /*   */ z-index:2; /*   */ bottom:8px; /**/ width:371px; opacity:0; /*  ,   */ filter:alpha(opacity=0); /*  ,     */ background: url('images/slidermenu.png') repeat-x; /**/ border-top: 1px solid rgba(255, 255, 255, 0.35); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } #slidecounter { float:left; /*   */ margin: 5px 9px; /**/ color: #727272; text-shadow: 0 0 1px #727272; font-size: 23px; } #slidetitle { float:left; /*   */ margin:11px 0; /**/ overflow:hidden; font-size:14px; color:#e5e5e5; } .slideimage { width:371px; /**/ float:left; /*   */ } #slidecontrollers { float:right; /*   */ width:57px; /**/ height:20px; box-shadow:0 1px 0 rgba(255,255,255,0.16), inset 0 2px 3px rgba(0,0,0,0.6); -webkit-box-shadow:0 1px 0 rgba(255,255,255,0.16), inset 0 2px 3px rgba(0,0,0,0.6); -moz-box-shadow:0 1px 0 rgba(255,255,255,0.16), inset 0 2px 3px rgba(0,0,0,0.6); border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; background:#222 url('images/slidecontrol_bg.png') repeat-x; margin:6px 9px 4px; text-align:center; padding:4px; } .imtype { display:inline-block; /*   ,       */ width:13px; /**/ height:20px; background-repeat:no-repeat; background-position:center; cursor:pointer; } #rew { background-image:url('images/rew.png'); /* */ } #few { background-image:url('images/few.png'); /* */ } .play { background-image:url('images/play.png'); /* */ } .pause { background-image:url('images/pause.png'); /* */ } #play-pause { margin:0 8px; /**/ } 

楽しい部分に移りましょう：すべてを動かします。
最初に、変数を作成します。

 var start_num=1; //      var auto_few=1; // (1)  (0)   var slidespeed=200; //     () var intervalspeed=3000; // () var num; //   .    ,     var i = start_num; //     i   var intervalID; //   var lock = 0; //      ,    

スライドの名前を変更する関数を書きましょう：

 function change_title() { $('#slidecounter').html(i + '/' + num); //  var title = $('img.slideimage#'+i).attr('data-title'); //   $('#slidetitle').html(title); //   } 

次に、前方スクロール関数と後方スクロール関数を作成しましょう。

 function few() { //  if(lock == 0) { //       if(i>=num) { //      ,  ,      (  371px),   ,       $('#slideimages').animate({'margin-left':'0'},slidespeed,function(){lock=0}); i = 1; } else { $('#slideimages').animate({'margin-left': parseInt($('#slideimages').css('margin-left')) - 371 + 'px'},slidespeed,function(){lock=0}); i++; } } lock = 1; change_title(); } function rew() { if(lock == 0) { if(i<=1) { $('#slideimages').animate({'margin-left': parseInt($('#slideimages').css('margin-left')) - 371*(num-1) + 'px'},slidespeed,function(){lock=0}); i = num; } else { $('#slideimages').animate({'margin-left': parseInt($('#slideimages').css('margin-left')) + 371 + 'px'},slidespeed,function(){lock=0}); i--; } } lock = 1; change_title(); } 

再生/一時停止ボタンの機能を追加しましょう

 function play_pause() { if(auto_few == 0) { // ? auto_few = 1; // ,    $('#play-pause').removeClass('play').addClass('pause'); //  few(); //   intervalID = setInterval(autofew, intervalspeed); //  } else { auto_few = 0; // ,   $('#play-pause').removeClass('pause').addClass('play'); //  clearInterval(intervalID); //  } } 

自動開始/停止機能。 まだ必要です：

 function stop_auto_few() { //  (. ) if(auto_few == 1) { auto_few = 0; $('#play-pause').removeClass('pause').addClass('play'); clearInterval(intervalID); } } function autofew() { if(auto_few == 1) { few(); } } 

今最も重要なこと。 ページが読み込まれるとどうなりますか？

 $(document).ready(function() { num = $('.slideimage').length; $('#slideimages').css({'width': 371*num + 'px','margin-left': (-371)*(start_num-1) + 'px'}); //           change_title(); //    if(auto_few == 0) { //  ,    $('#play-pause').removeClass('pause').addClass('play'); } else { // ,    intervalID = setInterval(autofew, intervalspeed); } $('#few').click(function() { //     few(); //   stop_auto_few(); //    "",       }); $('#rew').click(function() { rew(); stop_auto_few(); }); $('#play-pause').click(function() { play_pause(); }); $('#slideshow').mouseenter(function() { //    $('#controlrow').stop().animate({'opacity':'1.0','filter': 'alpha(opacity=100)'},100); }).mouseleave(function() { $('#controlrow').stop().animate({'opacity':'0.0','filter': 'alpha(opacity=0)'},500); }); }); 

結論として

まあ、それだけです。 巧妙な操作はしなかったようです。 もちろん、ほとんどの場合、コードはコメント付きで、言葉なしにはなりません。

そして再びデモ | ソースコード