JavaScriptの全機能の輪播図は総括を編纂します.

効果は以下の通りである(写真制限アップロードサイズは2 Mであるため、以下の動的図は一部機能を示している)、この輪播図はプレビュー図、ページボタン、右下角と左下隅の提示性の文字、中間のマーカーバー、マウスの移動、クリックなどのイベントの処理などを含む機能が非常に全面的であるべきである.
ロードショー図を見たばかりの時は、どのように実現されるかについては心当たりがないと思いましたが、研究してみると、マクロ的な原理は簡単で、キーはアクションと変数、アクションはページをめくるので、変数はページ索引、つまり現在のページの「ページ番号」です.適当な時に索引によってページをめくればいいです.ページをめくるのは自動でページをめくるか手動でページをめくるかに分けます.自動でページをめくるのはタイマーによってコントロールされています.何秒ごとにページをめくります.手動でページをめくると、次のページのボタンをクリックするなど、ユーザによって開始されます.この二つのページをめくる形式の実現原理は同じで、同じ関数で実現できます.例えば、ページをめくるボタンをクリックすると、このページの関数を呼び出すことができます.手動でページをめくることを実現した後、1行のコードだけで自動的にページをめくることができます.set Intervalメソッドの最初のパラメータを利用すると、イベントとなります.

setInterval(next.onclick,3000);//  3   next         

実現した機能は3秒ごとにnextボタンのクリックイベントを呼び出すもので、3秒ごとに次のページのボタンをクリックした場合に相当します.
これは自動でページをめくる原理です.簡単です.
これはnextボタンのクリックイベントを実現するだけでいいです.同様に、自動的に次のページにめくることもできます.
ページ関数はどうやって実現しますか?
インデックス(nowPic)を利用してどのページに翻訳するかを決めるのはとても便利なことです.インデックス値を手動で変更してからページ関数を呼び出してインデックス値が指しているページにめくるだけでいいです.
インデックス値を変更し、キーコードの一部を指定します.

next.onclick = function(){//   
	nowPic++;
	pageChange();
};

prev.onclick = function(){//   
	nowPic--;
	pageChange();
};

sLis[i].onclick = function(){//   s  
		nowPic = this.index;//   ，         
		pageChange();
};

tips[i].onmouseover = function(){//             
			nowPic = this.index;
			pageChange();
		};

                      ，         ：         ，                  ；   ，          ，             。    ：

        if (nowPic<0) {
			nowPic = sumOfLis - 1;
		}
		if (nowPic == sumOfLis) {
			nowPic = 0;
		}

まずページをめくるための主要な関数を取り出して、後からキーコードを分析します.
pageChange()
関数コードは以下の通りです

    function pageChange() {
		var widthOfSLis = sLis[0].offsetWidth;
		if (nowPic<0) {
			nowPic = sumOfLis - 1;
		}
		if (nowPic == sumOfLis) {
			nowPic = 0;
		}
		for (var i = 0; i < sumOfLis; i++) {//        ，        active   
			changeTo(sLis[i],'opacity',60);
			tips[i].style.backgroundColor = '';
		}
		changeTo(sLis[nowPic],'opacity',100);
		//       
		if (nowPic > 1 && nowPic < sumOfLis-1) {
			changeTo(ulSmall,'left',-(widthOfSLis * (nowPic-1)));
		}
		else if(nowPic == 0 || nowPic == 1)
		{
			changeTo(ulSmall,'left',0);
		}
		else if(nowPic == sumOfLis-1 || nowPic == sumOfLis-2 )
		{
			changeTo(ulSmall,'left',-(widthOfSLis * (sumOfLis-3)));
		}
		//      
		bLis[nowPic].style.height = 0;
		bLis[nowPic].style.zIndex = nowZIndex++;
		changeTo(bLis[nowPic],'height',ulBig.offsetHeight);
		//tips    
		tips[nowPic].style.backgroundColor = colorOfTips;
		//        
		desciption.innerHTML = sLis[nowPic].getElementsByTagName('img')[0].title;
		page.innerHTML = nowPic+1 +'/6' ;
    }

各セグメントのコードの由来を説明します.
先に上の大図のHTMLとCSS構造を見てみます.

<ul>
<li style="z-index:1;"><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/5.jpg" /></li>
<li><img src="images/6.jpg" /></li>
</ul>

li { width: 730px; height: 454px; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 0; background: url(    images/loading.gif) no-repeat center center;}
.big_pic li img{ width: 730px; height: 454px;}

父要素のulは絶対位置付けで、各li位置は同じで、どの枚を表示したいのかを一番上に置いて、z-inndexの値を変えることによってどの枚が一番上にあるかを決めて、グローバル変数を設定してコントロールすればいいという意味です.
それだけではなく、大図の出現過程は上から落とされたように、この動画はまず高さ値を0に設定し、その後徐々に目標値まで増加します.この時は前の関数changeToが必要です.
この関数を利用して多くの効果が得られます.好きだと言わざるを得ません.
PageChange()では、大図エリアの画像のコード部分を変更します.

		bLis[nowPic].style.height = 0;//      0
		bLis[nowPic].style.zIndex = nowZIndex++;
		changeTo(bLis[nowPic],'height',ulBig.offsetHeight);//         

下の図を見てください.

     <ul>
            <li style="filter: 100; opacity: 1;"><img src="images/1.jpg" title="   " /></li>
            <li><img src="images/2.jpg" title="      "/></li>
            <li><img src="images/3.jpg" title="   "/></li>
            <li><img src="images/4.jpg" title="    "/></li>
            <li><img src="images/5.jpg" title="   "/></li>
            <li><img src="images/6.jpg" title="  ，    "/></li>
        </ul>

.small_pic ul { width:480px; height: 94px; position: absolute; top: 0; left: 0; }

実はこのように、プレビューエリアでは3枚の小図しか見せられません.真ん中の写真は現在の画像です.私達は小包枠のover-flow属性をhiddenに設定しました.以下はこの属性値をデフォルトに設定して、プレビューエリアはどうやって働くか分かります.
毎回、現在表示されている画像をプレビューエリアの中間位置(1枚目と最後の1枚を除く)に置き、不透明度を1(changeTo()関数で完成)にして強調表示する効果が見られます.
どうやって小図の位置を変えますか?
――実は、親レベルのulの水平位置を適切な値に変えて、現在のプレビュー図をプレビューエリアの中央に表示させます.父レベルのulは絶対的な位置にあるので、位置を変えるのはとても簡単です.
――親の位置をどう変えるかを知っていたら、何か大切なことを忘れてしまったようです.そうだ、父レベルulは移動するべきです.
具体的に
位置の値はいくらですか?
    二つの状況に分けられます.
    
    (1):前の2枚のピクチャと後の2枚のピクチャについては同じ処理方式である:前の2枚のピクチャはulのleftを0に設定すればいい.後の2枚の写真については、left値を以下のように設定する必要があります.
offset Width*(写真の合計数-3)は、後の3つの画像を表示します.
    
(2):残りのピクチャについては、この数式に従います.
PageChange()では、大図エリアの画像のコード部分を変更します.

		if (nowPic > 1 && nowPic < sumOfLis-1) {
			changeTo(ulSmall,'left',-(widthOfSLis * (nowPic-1)));
		}
		else if(nowPic < 2)//   
		{
			changeTo(ulSmall,'left',0);
		}
		else if(nowPic > sumOfLis-3 )//   
		{
			changeTo(ulSmall,'left',-(widthOfSLis * (sumOfLis-3)));
		}

大図の左下と右下のヒント文字を忘れないでください.

</pre><pre name="code" class="javascript">desciption.innerHTML = sLis[nowPic].getElementsByTagName('img')[0].title;
page.innerHTML = nowPic+1 +'/6' ;