jqueryで画像スライド切り替えを実装（コード付き）

今回は、jQueryで画像スライド切り替えを実装するための注意事項を紹介します。実際のケースを見てみましょう。

JQueryはシンプルな画像スライド切り替え効果を実装しています

<meta>
  <title>t图片的滑动</title>
  <meta>
  <style>
    *{
      margin:0;
      padding:0;
    }
    #main{
      width:1089px;
      height:360px;
      margin:100px;
      background:url(../image/7.png);
    }
    ul li{
      list-style:none ;
      width:100px;
      height:360px;
      float:left;
    }
    a{
      color:#ffffff;
      text-decoration:none;
    }
    .txt{
      width:100px;
      height:360px;
      float:left;
      background:rgb(182, 255, 0);
    }
    p{
      font-family :"Arial.black",Gadugi.sans-serif ;
      font-size:18x;
      position:relative ;
      width:18px;
      font-weight:bold ;
      margin-top :120px;
      margin-left:48px;
    }
    .li1 {
      background: url( ../image/43.png);
    }
    .li2{background: url( ../image/42.png);}
    .li3{background: url( ../image/39.png);}
    .li4{background: url( ../image/47.png);}
  </style>
  


  <p>
    </p>

      

• 风景1

      

• 风景2

      

• 风景3

      

• 风景4

    

     <script></script>   <script> $(&#39;ul li&#39;).hover(function(){ $(this).stop(true).animate({ width: &#39;789px&#39; }, 500).siblings().stop(true).animate({width:&#39;100&#39;},500); }) </script>

以上がjqueryで画像スライド切り替えを実装（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。