Implémentation de carrousels d'images gauche et droite basés sur jQuery (principe général)

Implémentation de carrousels d'images gauche et droite basés sur jQuery (principe général)_jquery

WBOY

Libérer： 2016-05-16 15:23:50

original

1143 Les gens l'ont consulté

Cet article partage le code jQuery pour l'implémentation des carrousels d'images gauche et droit pour votre référence. Le contenu spécifique de l'implémentation est le suivant

Opération de rendu :

Pointez ! ! !

Principe de mise en œuvre :

Déterminez si l'image est déplacée vers la gauche ou la droite en jugeant le changement de la valeur d'index. En contrôlant la valeur gauche de l'image, un effet carrousel est obtenu.

Code spécifique :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <script src="js/jquery.min.js"></script>
  <style>
    .banner{
      margin:0 auto;
      border: 4px dashed black;
      width:400px;
      height:200px;
      position: relative;
      overflow:hidden;
    }
    .banner a{
      z-index: 100;
      display: block;
      width:100%;
      height: 100%;
      position: absolute;
      left:100%;
      top:0;
    }
    .banner .first{
      left:0;
    }
    .banner a img{
      width:100%;
      height: 100%;
    }
    .choose{
      z-index: 1000;
      position: absolute;
      left:150px;
      top:180px;
      width:100px;
      height: 10px;
    }
    .choose span{
      margin-right: 15px;
      float: left;
      display:block;
      background: blue;
      width:10px;
      height: 10px;
      border-radius: 10px;
    }
    .choose span:hover{
      background: red;
    }
    .choose .red{
      background: red;
    }
    .banner .pre,.next{
      cursor:pointer;
      text-align:center;
      border-radius:20px;
      display:block;
      background:#cccccc;
      opacity:0.4;
      text-decoration: none;
      z-index: 200;
      display:block;
      width:40px;
      height: 40px;
      font-size: 40px;
      color:red;
      position: absolute;
      top:80px;
    }
    .banner .pre{
      left:0px
    }
    .banner .next{
      right: 0px;
    }
  </style>
  <body>
    
    <div class="banner">
      <!--
        这里为上一页下一页点击按钮
      -->
      <span class="pre">-</span>
      <span class="next">+</span>
      <!--
        此处为轮播主体，颜色块代替。图片自加
      -->
      <a href="###" class="first" style="background: pink;"></a>
      <a href="###" style="background: blue;"><img src="images/banner1.jpg"/></a>
      <a href="###" style="background: greenyellow;"><img src="images/banner2.jpg"/></a>
      <a href="###" style="background: deepskyblue;"><img src="images/banner3.jpg"/></a>
      <!--
        此处为轮播部分下方小点选择
      -->
      <div class="choose">
        <span class="red"></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
    
    <script>
      /*定义两个变量，保存当前页码和上一页页码*/
      var $index=0;
      var $exdex=0;
      /*小点的鼠标移入事件，触发图片左移还是右移*/
      $(".choose span").mouseover(function(){
        //获取当前移入的index值
        $index=$(this).index();    
        //首先让点的颜色变化，表示选中
        $(".choose span").eq($index).addClass("red").siblings().
            removeClass("red");
        //判断如果index变小，证明图片要往左移动。变大则为右移
        if($index>$exdex){
          next();
        }else if($index<$exdex){
          pre();
        }
        //移动完毕将当前index值替换了前页index
        return $exdex=$index;
      });
      //下一页的点击事件。在右移基础上加了最大index判断
      $(".next").click(function(){
        $index++;
        if($index>3){
          $index=0
        }
        $(".choose span").eq($index).addClass("red").siblings().
            removeClass("red");
        next();
        return $exdex=$index;
      });
      //上一页的点击事件
      $(".pre").click(function(){
        $index--;
        if($index<0){
          $index=3
        };
        $(".choose span").eq($index).addClass("red").siblings().
          removeClass("red");
        pre();
        return $exdex=$index;
      });
      //加个定时器，正常轮播
      var atime=setInterval(function(){
        $(".next").click();      
      },1000);
      //这里为右移和左移的事件函数。
      //右移基本原理就是先让exdex定位的left左移百分百，而选中的当前页从屏幕右边移入,left变为0
      function next(){
        $(".banner a").eq($index).stop(true,true).
            css("left","100%").animate({"left":"0"});
        $(".banner a").eq($exdex).stop(true,true).
            css("left","0").animate({"left":"-100%"});
      }
      function pre(){
        $(".banner a").eq($index).stop(true,true).
          css("left","-100%").animate({"left":"0"});
        $(".banner a").eq($exdex).stop(true,true).
          css("left","0").animate({"left":"100%"});
      }
    </script>
  </body>
</html>

Copier après la connexion

Ce qui précède représente l'intégralité du contenu de cet article pour vous aider à obtenir un effet carrousel d'images simple et élégant.

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Implémentation de carrousels d'images gauche et droite basés sur jQuery (principe général)_jquery