Maison >interface Web >js tutoriel >Code d'implémentation de la commutation panoramique d'image unique

Code d'implémentation de la commutation panoramique d'image unique

小云云original: 2018-01-30 09:18:181821parcourir

Cet article présente principalement en détail l'implémentation js de l'effet de commutation de panoramique d'image unique. Une fois qu'une image est déplacée vers la gauche, elle est reculée vers la droite à partir du bas et attend le cycle suivant. .

Comme je n'ai pas besoin de la fonction de commutation manuelle, j'ai supprimé cette partie du contenu, principalement pour augmenter l'effet de commutation fluide.

Le principe est également très simple. Après avoir déplacé une image vers la gauche, elle recule vers la droite à partir du bas et attend le cycle suivant.

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <script src="js/jquery-1.10.1.min.js"></script>
</head>
<body> 
 <p class="wrapper"> 
  <h1>jquer实现图片切换</h1> 
  <p id="focus"> 
   <ul> 
    <!-- 这里有三个z-index的设置 -->
     <li><p class="switch_pic" style="z-index: 3;background: url(&#39;imgs/01.jpg&#39;) center center;background-size: cover;"></p></li> 
     <li><p class="switch_pic" style="z-index: 2;background: url(&#39;imgs/02.jpg&#39;) center center;background-size: cover;"></p></li> 
     <li><p class="switch_pic" style="z-index: 1;background: url(&#39;imgs/03.jpg&#39;) center center;background-size: cover;"></p></li> 
     <li><p class="switch_pic" style="background: url(&#39;imgs/04.jpg&#39;) center center;background-size: cover;"></p></li>
     <li><p class="switch_pic" style="background: url(&#39;imgs/meiko2.jpg&#39;) center center;background-size: cover;"></p></li>
     <li><p class="switch_pic" style="background: url(&#39;imgs/meiko7.jpg&#39;) center center;background-size: cover;"></p></li>
   </ul> 
   </p> 
  </p> 
  <script type="text/javascript">
  $(function() { 
  var sWidth = $("#focus").width(); 
  var len = $("#focus ul li").length; 
  var index = 0; 
  var picTimer; 
  var $pics = $("#focus ul li").find(&#39;.switch_pic&#39;);//获取所有图片

   showPics(index); //网页打开立即执行一次动画
   picTimer = setInterval(function() { 
    index++; 
    if(index == len) {index = 0;} 
    showPics(index); 
   },3000);//3000毫秒的间隔

  //显示图片函数，根据接收的index值显示相应的内容 
  function showPics(index) { //普通切换 
   var nowLeft = -sWidth; //每次移动固定量

   var $pic = $pics.eq(index);//获取当前要移出的图片
   var $nexPic = $pics.eq((index+1)%len);//当前要移入的图片
   var $nexnexPic = $pics.eq((index+2)%len);//下一个要移入的图片
   $nexPic.css("left",sWidth);//下一个图片移动到最右

   //当前要移出的图片开始左移，模式设为平滑"linear"，速度和间隔一样
   $pic.animate({"left":nowLeft},3000,"linear",function(){
    // 当前图片完全移出后，重新设置z-index
    $pic.css("z-index",1);
    $nexPic.css("z-index",3);
    $nexnexPic.css("z-index",2);
   });
   //当前要移入的图片同时左移
   $nexPic.animate({"left":0},3000,"linear");
  } 
 }); 
</script>
<style type="text/css">
 *{margin:0;padding:0;} 
 body{font-size:12px;color:#222;font-family:Verdana,Arial,Helvetica,sans-serif;background:#f0f0f0;} 
 .clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;} 
 .clearfix{zoom:1;} 
 ul,li{list-style:none;} 
 img{border:0;} 
 .wrapper{width:800px;margin:0 auto;padding-bottom:50px;} 
 h1{height:50px;line-height:50px;font-size:22px;font-weight:normal;font-family:"Microsoft YaHei",SimHei;margin-bottom:20px;} 

 #focus{width:450px;height:350px;overflow:hidden;position:relative;} 
 #focus ul{height:380px;position:absolute;} 
 #focus ul li{float:left;width:450px;height:350px;overflow:hidden;position:absolute;background:#000;} 
 #focus ul li p{position:absolute;overflow:hidden;width: 450px;height: 350px;} 
</style>
</body>

Recommandations associées :

JavaScript implémente le changement d'image de la page de contrôle de la molette de la souris

Tutoriel sur la façon d'implémenter la fonction de changement de contenu des balises js et css

Partage de la façon d'implémenter le changement d'image automatique ou manuel jQuery

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!

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：ionic3 et Angular4 implémentent des requêtes d'interface et des exemples de lecture de fichiers json locauxArticle suivant：ionic3 et Angular4 implémentent des requêtes d'interface et des exemples de lecture de fichiers json locaux

Articles Liés

Voir plus