ホームページ >ウェブフロントエンド >CSSチュートリアル >JavaScriptを使用して画像を左右に切り替える効果を実現します

JavaScriptを使用して画像を左右に切り替える効果を実現します

不言オリジナル: 2018-06-25 16:47:282820ブラウズ

この記事では主にJavaScriptに基づいた画像の左右切り替え効果を紹介します。興味のある方は参考にしてください。

この記事では画像の左右切り替え効果を実現するための詳細なコードを紹介します。内容は次のとおりです

特定のコード:

<html>
  <head>
    <title>JS图片左右切换效果</title>
    <meta charset="utf-8"/>
    <style type="text/css">
      *{
        margin:0;
        padding:0;       
      }    
         
      .images-scroll{
        border:1px solid #CCC;
        margin:100px auto;
        width:300px;
        height:200px;
        position:relative;
      }  
       
      .images-scroll ul{
        list-style:none;
      }
 
      .images-scroll li{
        float:left; 
        display:none;      
      }
 
      .images-scroll .active{
        display:block;
      }
 
      .images-scroll a{
         
      }
 
      .images-scroll img{
        width:300px;
        height:200px;
        border:none;
      }            
       
      .images-scroll .left-scroll{
        position:absolute;
        top:40%;
        left:-40px;
        opacity:0;
        background:url("images/bg_direction_nav.png");
        background-repeat:no-repeat;
        background-position:0px 0px;
        height:27px;
        width:27px;
        cursor:pointer;
      }
 
      .images-scroll .right-scroll{
        position:absolute;
        top:40%;
        opacity:0;
        right:-40px;
        background:url("images/bg_direction_nav.png");
        background-repeat:no-repeat;
        background-position:-30px 0px;
        height:27px;
        cursor:pointer;
        width:27px;       
      }  
 
      .images-scroll .right-scroll:hover{
        background-color:transparent;
      }
 
    </style>
    <script src="jquery-1.8.2.js"></script>
  </head>
  <body>
     
    <p id="images-scroll" class="images-scroll">
      <ul>
        <li class="active"><a href=""><img src="images/1.jpg" alt=""></a></li>
        <li><a href=""><img src="images/2.jpg" alt=""></a></li>
        <li><a href=""><img src="images/3.jpg" alt=""></a></li>
        <li><a href=""><img src="images/4.jpg" alt=""></a></li>
      </ul>
      <span id="left-scroll" class="left-scroll"></span>
      <span id="right-scroll" class="right-scroll"></span>
    </p>
    <script type="text/javascript">  
 
      $("#images-scroll").mouseover(function(){
        $("#left-scroll").animate({left: &#39;10px&#39;,opacity:&#39;1&#39;,},400);
        $("#right-scroll").animate({right: &#39;10px&#39;,opacity:&#39;1&#39;,},400);
      })
      $("#images-scroll").mouseleave(function(){
        $("#left-scroll").animate({left: &#39;-40px&#39;,opacity:&#39;0&#39;,},400);
        $("#right-scroll").animate({right: &#39;-40px&#39;,opacity:&#39;0&#39;,},400);        
      })
 
      imgScroll=setInterval("runScroll()",3000);
      var last_idx=$("#images-scroll ul li").index($("#images-scroll ul li:last"));
      function runScroll(){          
        var idx=$("#images-scroll ul li").index($("#images-scroll ul .active")[0]);
        $("#images-scroll li").eq(idx).removeClass("active").hide();
        idx+=1;
        if(idx%(last_idx+1)==0){
          idx=0;
        }
        $("#images-scroll li").eq(idx).addClass("active").show();
      }
      $("#left-scroll").click(function(){
        var idx=$("#images-scroll ul li").index($("#images-scroll ul .active")[0]);
        $("#images-scroll li").eq(idx).removeClass("active").hide();
        idx-=1;
        if(idx==-1){
          idx=last_idx;
        }
        $("#images-scroll li").eq(idx).addClass("active").show();
      })
      $("#right-scroll").click(function(){
        runScroll();
      })     
    </script>
     
  </body>
</html>

以上がこの記事の全内容です。皆様の学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

JavaScriptを使用して画像を左右に切り替える効果を実現します

関連記事