jQyery を使用してカルーセルを実装する方法を段階的に説明します。

実装原理

図に示すように、すべての画像が収まるまで

の width 属性値が非常に広く設定され、各画像がラップされて
• 左に設定される場合を想像してください。

  次に、ul を左に移動し、移動した距離が

• の幅になると、2 番目の
• は
  のウィンドウに移動するため、画像は画像になりません。表示されましたか？

  次に、

  のoverflow:hidden属性を設定して、

  ウィンドウ外の画像は表示されず、現在のウィンドウに移動した画像のみが表示されるようにします。もう少し完璧な気がしますね！

  

  いくつかの原則について話しました。わかりました。コードに直接進みましょう。jquery を導入することを忘れないでください。

  これはdivで作成したレイアウトです。作成時に枠線を追加し、作成後に削除することを忘れないでください。これはテストに便利です

  <div class="slideShow">
   <div class="nav-t">
    <ul>
     <li><a href="#" target="_blank"><img src="images/1.png" alt=""></a></li>
     <li><a href="#" target="_blank"><img src="images/2.png" alt=""></a></li>
     <li><a href="#" target="_blank"><img src="images/3.png" alt=""></a></li>
     <li><a href="#" target="_blank"><img src="images/4.png" alt=""></a></li>
     <li><a href="#" target="_blank"><img src="images/5.png" alt=""></a></li>
    </ul>
    <div class="nav-b">
     <span class="active">1</span>
     <span>2</span>
     <span>3</span>
     <span>4</span>
     <span>5</span>
    </div>
   </div>
   </div>
   <script type="text/javascript" src="jquery-min.js"></script>
   <script type="text/javascript" src="lunbo.js"></script>

  ログイン後にコピー

  次に、スタイルを設定します

  <style>
   .slideShow{
    border:0px solid blue;
    width:600px;
    height:450px;
    margin:50px auto;
    position:relative;
   }
   .nav-t{
    border:0px solid red;
    width:580px;
    height:430px;
    margin:8px auto;
    position:relative;
    overflow:hidden;
   }
   .nav-t ul{
    border:0px solid green;
    list-style:none;
    width:3000px;
    height:430px;
    margin:0;
    padding:0;
    position:relative;
   }
   .nav-t li{
    height:427px;
    width:580px;
    float:left;
   }
   .nav-b{
    position:absolute;
    top:390px;
    left:220px;
    cursor:default;
   }
   .nav-b span{
    margin-right:5px;
    border:1px solid red;
    padding:0 6px;
    border-radius:12px;
    color:#fff;
    background:rgba(132,125,119,0.5);
    cursor:pointer;
   }
   .nav-b span.active{
    background:rgba(0,0,0,0.8);
   }
   </style>

  ログイン後にコピー

  クリックカルーセル画像と自動を実現するには、jsを使用します。カルーセルの画像。マウスを上に動かしてカルーセルを停止します

  えー

  レンダリングを見てみませんか?さて

  

  

  まとめ

  さて、上記は jQyery を使ってカルーセルを実装する方法についてです。あなたもカルーセルを作成してみてはいかがでしょうか。この記事の内容が皆さんの勉強や仕事に少しでもお役に立てれば幸いです。ご質問がございましたら、メッセージを残してご連絡ください。

  jQyery を使用してカルーセルを実装する方法を段階的に説明するその他の関連記事については、PHP 中国語 Web サイトに注目してください。