JavaScript Domは、ロードショーの原理と実例を実現する。

まず彼の原理を明らかにします。どうやって右から左にスライドさせますか？
映画フィルムなど、生活の中で似たようなものがあるかどうか考えてみましょう。
投影領域としてブロックを作成して、ネガとしてリストを作成し、左に移動させて、タームマップ効果を達成できます。

ブロックとリストを作成します。
コンテナと表示領域の合計としてブロックを作成します。

<div id="out">
 <ul id="imgList">
 <li><img src="pto/many.jpg" ></li>
 <li><img src="pto/hello.jpg" ></li>
 <li><img src="pto/timg.jpg" ></li>
 <li><img src="pto/zhenjing.jpg"></li>
 </ul>
</div>

今は写真が縦に並んでいますが、ブロックはどこにあるか分かりません。
位置決めをオンにして、その中央に配置し、ブロックを大きくして、背景を良く確定する位置を追加する（本実験のピクチャの統一幅は500＊431より高いので、divのアスペクト比は520＊451）
リストのデフォルトスタイルを削除して、リストを横に表示します。

*{
 margin: 0;
 padding: 0;
 }
 #out{
  width:520px;
  height:451px ;
  background-color: #00bcd4;
 position: relative;
 margin: 50px auto;
 /*overflow: hidden;*/
 /*          ，         */
 }

 #imgList{
  list-style: none;
  position: absolute;
  /* left: -520px; */
 }
 #imgList li{
  float:left;
  margin: 10px;
}

浮動小数点を試しても写真は一列です。luの幅が小さすぎるので、拡大したいです。でも、彼の幅を直接決定することはできません。
画像を追加するごとに520 px幅を拡大します。

window.onload=function () {
 //    ul  
 var imgList = document.getElementById("imgList");
 var imgArr = document.getElementsByTagName("img");
 imgList.style.width=520*imgArr.length+"px";
 }//onload

現在、写真を積載したフィルムは、左にずらすと、-520 pxのイメージが変わります。
ナビゲーションバー
ロードショーの図面は時間通りに変更されますが、お客さんが魅力的になったばかりで、もう写真を変えたかもしれません。お客さんに乾燥したまま写真を見て帰ってきてほしいなら、彼女を失う可能性が高いです。
したがって、完全なカラーマップは、手動で前後のボタンまたはナビゲーションバーを切り替える必要があります。
私達はここでいくつかのハイパーリンクを使って任務を完成します。

<div id="navDiv">
 <a href="javascript:;"></a>
 <a href="javascript:;"></a>
 <a href="javascript:;"></a>
 <a href="javascript:;"></a>
</div>

ulは絶対位置を開いてからドキュメントの流れを離れます。今のナビゲーションは内容がないので、左上の隅に丸めてあります。
私達はそれぞれの超連結をお互いに分けて、手動で空間を広げて、下の位置に調整します。下の方が真ん中か右側がいいです。
透明度を調整してナビゲーションを下げるのは人の魅力に対して、結局写真がテーマです。
位置の調整は拡充しやすいようにjsで解決します。

 }
 #navDiv{
  position: absolute;
  bottom: 15px;
 }
 #navDiv a{
  float: left;
  width: 15px;
  height: 15px;
  background-color: #89ff00;
  margin: 0 5px;
  opacity: 0.5;
 }

//      
 var navDiv = document.getElementById("navDiv");
 var out = document.getElementById("out");
 
 //                   
 //           
 //      ， 。。        
 navDiv.style.left = (out.clientWidth - navDiv.clientWidth)/2+"px";

ナビゲーション機能が充実しています
わずか15 pxの大きな正方形がユーザーにどのようなフィードバックを与えますか？
現在の画像の位置は、マウスがナビゲーションに移動する時に、フィードバック情報をユーザーに教えます。クリックして、ナビゲーションをクリックして画像を切り替えることができます。

#navDiv a:hover{
  background-color: red;
  /*       */
 /*                    */
 }

//    
var allA = document.getElementsByTagName("a");
var index = 0;
 allA[index].style.backgroundColor="black";

 //      
 //       let，  i      
 for(let i=0;i<allA.length;i++){
  allA[i].onclick=function () {
  imgList.style.left=-520*i+"px";

  //      ，  css     
  allA[index].style.backgroundColor="";
  index=i;
  allA[index].style.backgroundColor="black";
  }
 }

アニメーション効果
なぜアニメを作るのですか？かっこいいから（RωQ*）♪
ロードショーの効果がないので、アドレスを変更すれば完成できるのに、半日はこれのためではなく、最大のタイトルでアニメがロードショーの精髄だと教えてくれます。
メインの考えはタイマーを使って、本来の一部で完成させる効果を何度も達成し、指定の位置に到達してタイマーをオフにすることです。
注意すべき問題
移動距離と画像のサイズが残れるたびに、停止位置が不正確（大きいか小さいか）または停止できなくなり、小さな誤差が徐々に蓄積されます。
タイマーがオンになる前に前のタイマーをオフにします。でないと、アニメーションが完成しない前にもう一つをクリックすると鬼畜現象が発生します。

 //      
 for(let i=0;i<allA.length;i++){
  allA[i].onclick=function () {
  move(imgList,-520*i,10);
  // imgList.style.left=-520*i+"px";
  //     low   
  allA[index].style.backgroundColor="";
  index=i;
  allA[index].style.backgroundColor="black";
  }
 }
 
function move(obj,target,speed) {//  ；    ；  
  //              
  //     ，                  
  clearInterval(obj.timer);
  
  var current = parseInt(window.getComputedStyle(obj,null).left);
  //      
  //      
  if(target<current){
  speed = -speed;
  }
  //     
  obj.timer = window.setInterval(function () {
  //m            
  var oldValue = parseInt(window.getComputedStyle(obj,null).left);
  //          
  var newValue = oldValue + speed;
  //        ，            
  if((speed < 0 && newValue < target)||(speed > 0 && newValue > target)){
   newValue = target;
  }
  imgList.style.left =newValue+"px";
  if(newValue == target){
   clearInterval(obj.timer);
  }

  },30);

 }

change();
 //    
 //           
 function change() {
  setInterval(function () {
  index++;
  index=index % imgArr.length ;
  console.log(imgArr.length);
  console.log(index);
  move(imgList,-520*index,20);
  for(let i=0;i<allA.length;i++){
   allA[i].style.backgroundColor="";
   allA[index].style.backgroundColor="black";
  }
  },3000);
 }

これはもうルーニーの基本的な機能ができますが、最後の写真を切り替える時には左に全部の画像を引っ張ります。これは非常にクールではありません。
もし私たちが図aとbの二つの図を交互に放送すると仮定します。
最後に図aと同じ図を挿入できます。
二枚の図を順番に放送した後、三枚目の図に移動すると、一枚目の絵だと誤解されます。
3枚目の図が終わったら、すぐに1枚目にジャンプして、連続して放送します。これは嘘の海を越えた計です。

轮播図については原理を知るだけで、枠组みはもちろん、jqueryが轮播図を完成するのにも、単なる手制の10分の1の精力はいらない。
完全コード

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 *{
  margin: 0;
  padding: 0;
 }
 #out{
  width:520px;
  height:451px ;
  margin: 50px auto;
  background-color: #00bcd4;
  position: relative;
  overflow: hidden;
 }

 #imgList{
  list-style: none;
  position: absolute;
 }
 #imgList li{
  float:left;
  margin: 10px;
 }
 #navDiv{
  position: absolute;
  bottom: 15px;
 }
 #navDiv a{
  float: left;
  width: 15px;
  height: 15px;
  background-color: #89ff00;
  margin: 0 5px;
  opacity: 0.5;


 }
 #navDiv a:hover{
  background-color: red;
 /*                     */
 }

 </style>
</head>
<body>
<div id="out">
 <ul id="imgList">
 <li><img src="pto/many.jpg" ></li>
 <li><img src="pto/hello.jpg" ></li>
 <li><img src="pto/timg.jpg" ></li>
 <li><img src="pto/zhenjing.jpg"></li>
 <li><img src="pto/many.jpg" ></li>
 </ul>
 <div id="navDiv">
 <a href="javascript:;" ></a>
 <a href="javascript:;" ></a>
 <a href="javascript:;" ></a>
 <a href="javascript:;" ></a>
 </div>
</div>
<script>
 window.onload=function () {
 //    ul  
 var imgList = document.getElementById("imgList");
 var imgArr = document.getElementsByTagName("img");
 imgList.style.width=520*imgArr.length+"px";

 //      
 var navDiv = document.getElementById("navDiv");
 var out = document.getElementById("out");
 navDiv.style.left = (out.clientWidth - navDiv.clientWidth)/2+"px";

 //    
 var allA = document.getElementsByTagName("a");
 var index = 0;
 allA[index].style.backgroundColor="black";

 //      
 for(let i=0;i<allA.length;i++){
  allA[i].onclick=function () {
  move(imgList,-520*i,20);
  setA();
  // imgList.style.left=-520*i+"px";
  // allA[index].style.backgroundColor="";
  // index=i;
  // allA[index].style.backgroundColor="black";
  }
 }

 //     
 function move(obj,target,speed,callback) {//  ；    ；  ;    
  clearInterval(obj.timer);
  var current = parseInt(window.getComputedStyle(obj,null).left);
  //      
  //      
  if(target<current){
  speed = -speed;
  }
  //     
  obj.timer = window.setInterval(function () {
  //m          
  var oldValue = parseInt(window.getComputedStyle(obj,null).left);
  //          
  var newValue = oldValue + speed;
  //        ，            
  if((speed < 0 && newValue < target)||(speed > 0 && newValue > target)){
   newValue = target;
  }
  imgList.style.left =newValue+"px";
  if(newValue == target){
   clearInterval(obj.timer);
   callback();
  }

  },30);

 }
 change();
 //    
 //           
 function change() {
  setInterval(function () {
  index++;
  index=index % imgArr.length ;
  move(imgList,-520*index,20,function () {
   if(index>=imgArr.length-1 ){
   imgList.style.left =0;
   }
   setA();
  });

  },3000);
 }
 function setA() {
  for(let i=0;i<allA.length;i++){
  allA[i].style.backgroundColor="";
  allA[index].style.backgroundColor="black";

  }
 }
 }//onload
</script>
</body>
</html>

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。