Maison >interface Web >js tutoriel >Comment implémenter un carrousel d'images avec jQuery

Comment implémenter un carrousel d'images avec jQuery

亚连original: 2018-06-07 10:59:531738parcourir

Cet article présente principalement l'effet carrousel d'images simple implémenté par jQuery, et analyse les techniques d'implémentation liées à la transformation dynamique des éléments de page par jQuery combinant fonction temporelle et opération sur nombres aléatoires sous la forme d'un exemple complet, avec glissement à direction fixe , fondu entrant et sortant, etc. Effet de commutation, le code est très simple et pratique, les amis dans le besoin peuvent s'y référer

Cet article décrit l'effet carrousel d'images simple implémenté par jQuery. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Jetons d'abord un coup d'œil à l'effet de course :

Le code spécifique est le suivant :

<!DOCTYPE html>
<html>
<head>
<title>jquery实现图片轮播效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
#lunbo{width: 600px;height: 300px;margin: 0 auto;overflow: hidden;}
#pics{width: 600px;height: 300px;cursor: pointer;position: relative;}
ul li{width: 600px;height: 300px;list-style: none;position: absolute;top: 0;left: 0;display: none;}
img{width: 600px;height: 300px;}
</style>
</head>
<body>
<p id="lunbo">
  <ul id="pics">
    <li style="display: inline;"><img src="http://pic.qiantucdn.com/58pic/14/60/54/32n58PICxE6_1024.jpg"></li>
    <li><img src="http://pic.qiantucdn.com/58pic/19/09/94/5678b76f75315_1024.jpg"></li>
    <li><img src="http://pic.qiantucdn.com/58pic/19/39/22/01D58PICFx7_1024.jpg"></li>
    <li><img src="http://pic.qiantucdn.com/58pic/19/11/08/5679490f4892d_1024.jpg"></li>
    <li><img src="http://pic.qiantucdn.com/58pic/18/44/26/5620690acb188_1024.jpg"></li>
  </ul>
</p>
<script type="text/javascript">
$(document).ready(function(){
  var oLi = $("li");
  var liWidth = oLi.eq(0).width();
  var liHeight = oLi.eq(0).height();
   //每隔3秒进行轮播
  var timer = setInterval(change,3000);
    //鼠标放置在图片上时停止轮播，移开时继续轮播
    $("p").mouseover ( function(){
    clearInterval(timer);
  })
  $("p").mouseout (function(){
    timer = setInterval(change,3000);
  })
  //轮播函数
  var prevIndex = 0,nextIndex = 1;
  function change(){
    if (prevIndex == oLi.length-1 ) {//若当前图片是最后一张图片，下一张出现首张图片
      nextIndex = 0;
    }
    var n = Math.floor(Math.random()*3);
    if (n == 0) {
      fade(prevIndex,nextIndex);
    }
    else if (n== 2) {
      slide(prevIndex,nextIndex);
    }
    else{
      grap(prevIndex,nextIndex);
    }
    prevIndex = nextIndex;
    nextIndex ++;
  }
  //淡入淡出效果,
   function fade(prevIndex,nextIndex){
    //传入当前显示图片以及下一张图片的索引
    oLi.eq(prevIndex).fadeOut(1000);
    oLi.eq(nextIndex).fadeIn(1000);
   }
   //向左右滑动效果
   function slide(prevIndex,nextIndex){
    var rand = Math.floor(Math.random()*2);
    oLi.eq(nextIndex).show();
    oLi.eq(nextIndex).css("z-index","-1");
    if (rand) {
      //向左滑动
      oLi.eq(prevIndex).animate({left: -liWidth},1000,fun);
    }
    else{
      oLi.eq(prevIndex).animate({left: liWidth},1000,fun);
    }
    function fun(){
      oLi.eq(prevIndex).css({"left":"0","display":"none"});
      oLi.eq(nextIndex).css("z-index","1");
    }
   }
   //收缩效果
   function grap(prevIndex,nextIndex){
    var rand = Math.floor(Math.random()*4);
    oLi.eq(nextIndex).show();
    oLi.eq(nextIndex).css("z-index","-1");
    switch (rand){
      case 0://向左上角滑动
        oLi.eq(prevIndex).animate({left: -liWidth,top: -liHeight},1000,function(){
          oLi.eq(prevIndex).css({"left":"0","top": "0","display":"none"});
          oLi.eq(nextIndex).css("z-index","1");
        });break;
      case 1://向右上角滑动
        oLi.eq(prevIndex).animate({left: liWidth,top: -liHeight},1000,function(){
          oLi.eq(prevIndex).css({"left":&#39;0&#39;,"top":"0","display":"none"});
          oLi.eq(nextIndex).css("z-index","1");
        });break;
      case 2://向右下角滑动
        oLi.eq(prevIndex).animate({left: liWidth,top: liHeight},1000,function(){
          oLi.eq(prevIndex).css({"left":&#39;0&#39;,"top":"0","display":"none"});
          oLi.eq(nextIndex).css("z-index","1");
        });break;
      case 3://向左下角滑动
        oLi.eq(prevIndex).animate({left: -liWidth,top: liHeight},1000,function(){
          oLi.eq(prevIndex).css({"left":&#39;0&#39;,"top":"0","display":"none"});
          oLi.eq(nextIndex).css("z-index","1");
        });break;
      default:break;
    }
   }
  });
</script>
</body>
</html>

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles Liés

Voir plus