Implementierung des Links- und Rechtswechseleffekts von Bildern basierend auf javascript_javascript-Fähigkeiten-js-Tutorial-php.cn

Implementierung des Links- und Rechtswechseleffekts von Bildern basierend auf javascript_javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:18:17

Original

1365 Leute haben es durchsucht

Das Beispiel in diesem Artikel stellt den detaillierten Code von Javascript vor, um den linken und rechten Umschalteffekt des Bildes zu erzielen. Der spezifische Inhalt ist wie folgt

Rendering:

Spezifischer Code:

<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>
     
    <div 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>
    </div>
    <script type="text/javascript">  
 
      $("#images-scroll").mouseover(function(){
        $("#left-scroll").animate({left: '10px',opacity:'1',},400);
        $("#right-scroll").animate({right: '10px',opacity:'1',},400);
      })
      $("#images-scroll").mouseleave(function(){
        $("#left-scroll").animate({left: '-40px',opacity:'0',},400);
        $("#right-scroll").animate({right: '-40px',opacity:'0',},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>

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle beim Erlernen der Javascript-Programmierung hilfreich sein wird.