suchen

Heim >Web-Frontend >js-Tutorial >Beispiel für die gemeinsame Nutzung eines js-Einzelbild-Schwenkwechseleffekts

Beispiel für die gemeinsame Nutzung eines js-Einzelbild-Schwenkwechseleffekts

小云云
小云云Original
2018-01-24 16:01:342212Durchsuche

In diesem Artikel wird hauptsächlich die js-Implementierung des Einzelbild-Schwenkwechseleffekts im Detail vorgestellt. Nachdem ein Bild nach links verschoben wurde, wird es von unten nach rechts verschoben und wartet auf den nächsten Zyklus Für diejenigen, die interessiert sind, können Sie darauf verweisen. Ich hoffe, es kann allen helfen.

Dieser Artikel bezieht sich auf JQuery zur Implementierung der Bildumschaltung (automatische Umschaltung + manuelle Umschaltung)

Da ich persönlich die manuelle Umschaltfunktion nicht benötige, habe ich diesen Teil gelöscht des Inhalts, hauptsächlich Es fügt den Effekt eines nahtlosen Wechsels hinzu.

Das Prinzip ist auch sehr einfach. Nachdem ein Bild nach links verschoben wurde, bewegt es sich von unten wieder nach rechts und wartet auf den nächsten Zyklus. 


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

Verwandte Empfehlungen:

Beispiel für die JavaScript-Implementierung der Mausrad-Steuerungsfunktion zum Umschalten von Seitenbildern

Detailliertes Beispiel für den automatischen oder manuellen jQuery-Bildwechseleffekt

Beispielcode für JavaScript zur Implementierung des Seitenbildwechsels mit der Mausradsteuerung

Verwenden Sie Einführung in die Methode zum Bildwechsel mit JavaScript

Einfache Implementierung des JavaScript-Bildwechseleffekts

Das obige ist der detaillierte Inhalt vonBeispiel für die gemeinsame Nutzung eines js-Einzelbild-Schwenkwechseleffekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：ionic3 und Angular4 implementieren Schnittstellenanforderungen und das Lesen lokaler JSON-DateienNächster Artikel：ionic3 und Angular4 implementieren Schnittstellenanforderungen und das Lesen lokaler JSON-Dateien

In Verbindung stehende Artikel

Mehr sehen