Maison > Article > interface Web > Implémentation d'un effet carrousel d'images (image de focus) basé sur JQuery_jquery

Implémentation d'un effet carrousel d'images (image de focus) basé sur JQuery_jquery

WBOYoriginal: 2016-05-16 15:16:361223parcourir

J'ai écrit une image de focus carrousel horizontal sous forme pure jq, qui peut être commutée en cliquant sur le petit point ou sur les boutons gauche et droit. C'est un type à largeur fixe. Il n'est pas difficile de passer à la largeur adaptative. Modifiez la largeur de BannerCon en CSS en pourcentage, puis modifiez la largeur de ul et li pour suivre la largeur du conteneur parent dans js. Vous devez utiliser $(window).resize. .

Compatible avec les navigateurs IE6 et supérieurs, deux paramètres peuvent être modifiés : la vitesse du carrousel et l'intervalle de commutation.

Le rendu est le suivant :

Le code HTML est le suivant :

<html>
<head>
 <meta charset="utf-8">
 <title>banner图</title>
 <link href="css/style.css" rel="stylesheet"/>
 <script src="js/jquery-1.9.1.min.js"></script>
 <script src="js/common.js"></script>
</head>
<body>
 <div class="wrap">
  <div class="banner">
   <div class="bannerCon">
    <ul class="imgList">
     <li><a href="#"><img src="images/banner01.jpg" alt=""/></a></li>
     <li><a href="#"><img src="images/banner02.jpg" alt=""/></a></li>
     <li><a href="#"><img src="images/banner03.jpg" alt=""/></a></li>
    </ul>
    <ul class="btnList clearfix">
     <li class="cur"><span></span></li>
     <li><span></span></li>
     <li><span></span></li>
    </ul>
    <span class="pre-nex prev"><</span> 
    <span class="pre-nex next">></span> 
   </div>
  </div>
 </div>
</body>
</html>

Le style CSS est le suivant :

@charset "utf-8";
/* 简单reset */
body, p, ul, ol, li {
  margin: 0;
  padding: 0;
}
ul, ol {
  list-style: none;
}
img { border:none; }
a,button{ outline: none; }
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
} 
/* 具体样式 */
.banner {
  position: relative;
  height: 400px;
  overflow: hidden;
}
.banner .bannerCon {
  position: absolute;
  top: 0;
  left: 50%;
  width: 800px;
  height: 400px;
  margin-left: -400px;
  overflow: hidden;
}
.bannerCon .imgList {
  position: absolute;
  top: 0;
  left: 0;
  width: 99999px;
  height: 400px;
}
.bannerCon .imgList li {
  float: left;
  width: 800px;
  height: 400px;
}
.bannerCon .imgList li a {
  position: relative;
  display: block;
  height: 100%;
}
.bannerCon .imgList li img {
  width: 800px;
  height: 400px;
}
.bannerCon .pre-nex {
  display: none;
  position: absolute;
  top: 50%;
  width: 40px;
  height: 60px;
  margin-top: -40px;
  font: bold 40px/60px Simsun;
  color: #ccc;
  text-align: center;
  border:none;
  background: rgba(0,0,0,.30);
  filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#4c000000, endColorStr=#4c000000);
  cursor: pointer;
  z-index: 3;
}
.bannerCon .pre-nex.show { display: inline-block; }
.bannerCon .prev { left: 13%; }
.bannerCon .next { right: 13%; }
.bannerCon .btnList {
  position: absolute;
  left: 0;
  bottom: 20px;
  width: 100%;
  height: 12px;
  text-align:center;
  z-index: 2;
  _overflow: hidden;
}
.bannerCon .btnList li { display: inline; }
.bannerCon .btnList li span {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 5px;
  border-radius: 6px;
  background-color:#14829e;
  cursor: pointer;
}
.bannerCon .btnList li.cur span { background-color: #f30; }

Le code Js est le suivant :

//加载在文本读取之后的js语句 开始 =============================================================
  function Scroll(obj,speed,interval){  //父级容器，轮播速度，切换间隔
    $("."+obj).each(function(){
      var $box = $(this),
      $imgUl = $box.children(".imgList"),
      $imgLi = $imgUl.children("li"),
      $btnUl = $box.children(".btnList"),
      $btnLi = $btnUl.children("li"),
      $btnPreNex = $box.children(".pre-nex"),
      $btnPre = $box.children(".prev"),
      $btnNex = $box.children(".next"),
      n = $imgLi.length,
      width = $imgLi.width(),
      left = parseFloat($imgUl.css("left")),
      k = 0,
      Player;
      $imgUl.css("width",n*width);
      function scroll(){        //轮播事件
        $imgUl.stop().animate({left:-width},speed,function(){
          k += 1;
          $imgUl.css("left",0);
          $imgUl.children("li:first").appendTo($(this));
          $btnLi.removeClass('cur');
          if(k >= n){
            k = 0;
          }
          $btnUl.children("li").eq(k).addClass('cur');      
        });
      }
      $btnLi.click(function(){     //小圆点点击事件
        var index = $btnLi.index(this);  
        $(this).addClass('cur').siblings("li").removeClass('cur');
        if(index >= k){
          var dif = index-k;
          left = -dif*width;
          $imgUl.stop().animate({left:left},speed,function(){
            $imgUl.css("left",0);
            $imgUl.children("li:lt("+dif+")").appendTo($imgUl);  
          });
        }
        else{
          var j = n-(k-index);
          $imgUl.css("left",(index-k)*width);
          $imgUl.children("li:lt("+j+")").appendTo($imgUl);
          $imgUl.stop().animate({left:0},speed);  
        }
        k = index;
      });  
      $btnPreNex.click(function(){   //左右按钮点击事件
        var index = $btnLi.index(this);    
        if($(this).hasClass('next')){
          if(!$imgUl.is(":animated")){
            k += 1;
            $imgUl.animate({left:-width},speed,function(){
              $imgUl.css("left",0);
              $imgUl.children("li:first").appendTo($(this));
              if(k >= n){
                k = 0;
              }
              $btnUl.children("li").removeClass('cur').eq(k).addClass('cur');
            });
          }
        }
        else {
          if(!$imgUl.is(":animated")){
            k += -1;
            $imgUl.css("left",-width);
            $imgUl.children("li:last").prependTo($imgUl);
            $imgUl.stop().animate({left:0},speed);
            if(k < 0){
              k = n-1;
            }
            $btnUl.children("li").removeClass('cur').eq(k).addClass('cur');
          }
        }
      });    
      $box.hover(           //鼠标移入、移出事件
        function(){
          clearInterval(Player);
          $btnPreNex.addClass('show');
        },
        function(){
          Player = setInterval(function(){scroll()},interval);
          $btnPreNex.removeClass('show');
        }
        );
      Player = setInterval(function(){scroll()},interval);
    });
  }  
  $(function () {              //读取轮播事件
    Scroll("bannerCon",600,4000);
  });

Faites attention au chargement de la bibliothèque jq. J'utilise la version 1.9.1. En fait, la version 1.7 convient.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il pourra aider tout le monde.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Résumé des différentes manières d'obtenir des sources de données AngularJS_AngularJSArticle suivant：Résumé des différentes manières d'obtenir des sources de données AngularJS_AngularJS

Articles Liés

Voir plus