Utilisez javascript pour obtenir l'effet de basculer les images vers la gauche et la droite-tutoriel CSS-php.cn

Utilisez javascript pour obtenir l'effet de basculer les images vers la gauche et la droite

不言

Libérer： 2018-06-25 16:47:28

original

2807 Les gens l'ont consulté

Cet article vous présente principalement l'effet de commutation gauche et droite des images basées sur javascript. Les amis intéressés peuvent s'y référer

Cet article présente le code détaillé de javascript pour obtenir l'effet de commutation gauche et droite de. images. Partagez-le avec Pour votre référence, le contenu spécifique est le suivant

Rendu :

Code spécifique :

<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>

Copier après la connexion

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

jQuery et CSS3 implémentent un menu de navigation en position supérieure fixe avec imitation pétale net avec effet flottant

javascript Implémenter flux en cascade pour charger dynamiquement des images

JS implémente la fonction de glisser vers la gauche sur le terminal mobile pour afficher le bouton de suppression

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!