はじめに
このネットワークには非常に多くの既製のスライドショーがあり、写真を追加するだけで、さまざまなアニメーションを使用してその変化を楽しむことができます。 それらを見て、私はこの自転車を自分で発明したかったのです。 体積効果なしなど 最も一般的なスライドショー。
仕組み
操作の原理は簡単です。「より本格的な」ブロックをスライドのサイズに一致するブロックに入れ、そこに左側に配置された画像（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); }); });
結論として
まあ、それだけです。 巧妙な操作はしなかったようです。 もちろん、ほとんどの場合、コードはコメント付きで、言葉なしにはなりません。
そして再びデモ | ソースコード