Heim > Artikel > Web-Frontend > Verwenden Sie Javascript, um den Effekt zu erzielen, dass Bilder nach links und rechts verschoben werden

Verwenden Sie Javascript, um den Effekt zu erzielen, dass Bilder nach links und rechts verschoben werden

不言Original: 2018-06-25 16:47:282711Durchsuche

In diesem Artikel wird hauptsächlich der auf Javascript basierende Links- und Rechtswechseleffekt von Bildern vorgestellt.

Dieser Artikel stellt den detaillierten Code von Javascript vor, um den Links- und Rechtswechseleffekt von Bildern zu erzielen. Teilen Sie es mit Zu Ihrer Information: Der spezifische Inhalt lautet 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>
     
    <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>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

jQuery und CSS3 implementieren imitiertes Blütenblattnetz-Navigationsmenü mit fester oberer Position und schwebendem Effekt

Javascript Implementieren Wasserfallfluss zum dynamischen Laden von Bildern

JS implementiert die Funktion, auf dem mobilen Endgerät nach links zu schieben, um die Schaltfläche „Löschen“ anzuzeigen

Das obige ist der detaillierte Inhalt vonVerwenden Sie Javascript, um den Effekt zu erzielen, dass Bilder nach links und rechts verschoben werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php JavaScript jquery css3 JS

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Verwendung des CSS-Tabellenlayout-AttributsNächster Artikel：Verwendung des CSS-Tabellenlayout-Attributs

In Verbindung stehende Artikel

Mehr sehen