Heim > Artikel > Web-Frontend > jquery implementiert Spezialeffekte für die Rotation von Bildanzeigen

jquery implementiert Spezialeffekte für die Rotation von Bildanzeigen

php中世界最好的语言Original: 2018-04-24 10:38:203208Durchsuche

Bevor wir den Code schreiben, analysieren wir zunächst die Struktur des Renderings:

1. Mit den Richtungstasten nach links und rechts kann zwischen dem vorherigen und dem nächsten gewechselt werden Bilder.

2. Unten befindet sich eine Seitenanzeige, die anzeigt, zu welchem Bild Sie gescrollt haben. Sie können natürlich auch durch Klicken auf die entsprechende Schaltfläche zum entsprechenden Bild springen.

3. Der Hauptanzeigebereich in der Mitte dient zur Anzeige von Bildern, die gedreht werden müssen.

Gemäß der obigen Beschreibung können wir zunächst HTML-Code schreiben.

1. HTML-Code

<body> 
  <p id="youku"> 
    <p class="anniu"> 
      <span class="zuo"></span> 
      <span class="you"></span> 
    </p> 
    <ul class="tuul"> 
      <li class="no0"><a href="#"><img src="images/0.jpg" /></a></li> 
      <li class="no1"><a href="#"><img src="images/1.jpg" /></a></li> 
      <li class="no2"><a href="#"><img src="images/2.jpg" /></a></li> 
      <li class="no3"><a href="#"><img src="images/3.jpg" /></a></li> 
      <li class="no4"><a href="#"><img src="images/4.jpg" /></a></li> 
      <li class="waiting"><a href="#"><img src="images/5.jpg" /></a></li> 
      <li class="waiting"><a href="#"><img src="images/6.jpg" /></a></li> 
      <li class="waiting"><a href="#"><img src="images/7.jpg" /></a></li> 
      <li class="waiting"><a href="#"><img src="images/8.jpg" /></a></li> 
    </ul> 
    <p class="xiaoyuandian"> 
      <ul> 
        <li></li> 
        <li></li> 
        <li class="cur"></li> 
        <li></li> 
        <li></li> 
        <li></li> 
        <li></li> 
        <li></li> 
        <li></li> 
      </ul> 
    </p> 
  </p> 
</body>

Der Inhalt des Codes ist auf den ersten Blick klar und stimmt mit dem überein, was ich oben beschrieben habe Um es hier zu erklären: 1. Das ul mit der Klasse tuul wird zum Speichern von Bildern verwendet, die gedreht werden müssen. Das li enthält hauptsächlich zwei Klassen: verpackt in der Form „no“ und „waiting“, wobei das „no“ vorhanden ist „Reihe zeigt Bilder an, die sich derzeit möglicherweise im Status „aktiv“ befinden. , und „Warten“ bedeutet, dass diese Bilder derzeit ausgeblendet sind, was sich im folgenden CSS-Code widerspiegelt.

2. Der Paging-Indikator setzt die Klasse des dritten Li standardmäßig auf cur. Da die Anzahl der „aktiven“ Bilder anfänglich 5 beträgt, wird das dritte Kapitel standardmäßig in der Mitte angezeigt. Aber ich weiß nicht, ob Sie irgendwelche Zweifel haben. Im Ausgangszustand werden auf der Benutzeroberfläche 3 Bilder angezeigt. Warum also nicht das zweite Bild als zentriertes Bild auswählen? Denn wenn Sie auf die Schaltfläche links klicken und das zweite Bild in der Mitte anzeigen möchten, ist das erste Bild zu sehen, aber vor dem ersten Bild befindet sich kein Bild. Wenn Sie auf die linke Schaltfläche klicken, wird es „freigelegt“. Die allgemeine Designidee lautet also: Auf der Benutzeroberfläche werden drei Bilder angezeigt, und links und rechts vom Teil hinter der Benutzeroberfläche befindet sich ein Bild, das Sie jedoch nicht sehen können. In der folgenden Erklärung werde ich diesen Implementierungsprozess im Detail erläutern.

2. CSS-Code

<style type="text/css"> 
    *{ 
      padding: 0; 
      margin: 0; 
    } 
    #youku{ 
      width: 1189px; 
      height: 360px; 
      margin: 100px auto; 
      position: relative; 
      overflow: hidden; 
    } 
    #youku ul{ 
      list-style: none; 
    } 
    #youku .tuul li{ 
      position: absolute; 
      background-color: black; 
    } 
    #youku li.waiting{ 
      display: none; 
    } 
    #youku li img{ 
      width: 100%; 
      height: 100%; 
    } 
   
 
    #youku .anniu .zuo{ 
      position: absolute; 
      width: 45px; 
      height: 45px; 
      background:url(images/zuo.png) no-repeat; 
      top:100px; 
      left:10px; 
      z-index: 1000; 
      cursor: pointer; 
    } 
    #youku .anniu .you{ 
      position: absolute; 
      width: 45px; 
      height: 45px; 
      background:url(images/you.png) no-repeat; 
      top:100px; 
      right:10px; 
      z-index: 1000; 
      cursor: pointer; 
    } 
 
    #youku li.no0{width: 174px;height:122px;left:-116px;top:100px;z-index: 777;} 
    #youku li.no1{width: 356px;height:223px;left:0px;top:26px;z-index: 888;} 
    #youku li.no2{width: 642px;height:273px;left:274px;top:0px;z-index: 999;} 
    #youku li.no3{width: 356px;height:223px;left:834px;top:26px;z-index: 888;} 
    #youku li.no4{width: 174px;height:122px;left:1097px;top:100px;z-index: 777;} 
 
    #youku li.no1 img , #youku li.no3 img{ 
      opacity: 0.3; 
    } 
    #youku .xiaoyuandian{ 
      width: 600px; 
      height: 20px; 
      position: absolute; 
      top: 312px; 
      left: 454px; 
    } 
    #youku .xiaoyuandian ul li{ 
      float: left; 
      width: 16px; 
      height: 16px; 
      background-color: blue; 
      margin-right: 10px; 
      border-radius: 100px; 
      cursor: pointer; 
    } 
    #youku .xiaoyuandian ul li.cur{ 
      background-color:green; 
    } 
  </style>

Ich werde das CSS hier nicht einzeln erklären. Wenn Sie es genauer wissen möchten, lesen Sie bitte das, was ich Ich habe vor der Serie JS & JQuery nur zwei Punkte erläutert: Der Wert von no0 ist eine negative Zahl und der linke Wert von no1. Der linke Wert ist 0, was den oben ausgedrückten Punkt bestätigt. Der statische Zustand des visuellen Bereichs zeigt drei Bilder an, und die verbleibenden zwei Bilder befinden sich links und rechts Seiten des visuellen Bereichs. Achten Sie darauf, den Z-Indexwert jedes Bildes so festzulegen, dass es eine dreidimensionale Hierarchie vermittelt. Je größer der Wert, desto näher ist die Anzeige.

2. Stellen Sie für die Bilder auf beiden Seiten des sichtbaren Bereichs die Deckkraft ein, um sie dunkler zu machen.

Nach dem Festlegen des obigen CSS-Codes sieht das Analysediagramm wie folgt aus:

3. JQuery-Code

Ich werde die Steuerung von Timern und Klicks von Paging-Schaltflächen im JQuery-Code hier nicht vorstellen. Wenn Sie interessiert sind, lesen Sie bitte den Inhalt in: JS & JQuery.

<script type="text/javascript"> 
    $(document).ready( 
      function() { 
        //定义一个初始速度 
        var sudu = 600; 
        var shangdi = false; 
 
        //定义json 
        var json0 = {"width":"174px","height":"122px","left":"-116px", "top":"100px"}; 
        var json1 = {"width":"356px","height":"223px","left":"0px", "top":"26px"}; 
        var json2 = {"width":"642px","height":"273px","left":"274px", "top":"0"}; 
        var json3 = {"width":"356px","height":"223px","left":"834px", "top":"26px"}; 
        var json4 = {"width":"174px","height":"122px","left":"1097px", "top":"100px"}; 
         
        var nowimg = 2; 
 
        var timer = setInterval(youanniuyewu,2000); 
        $("#youku").mouseenter( 
          function() { 
            clearInterval(timer); 
          } 
        ); 
 
        $("#youku").mouseleave( 
          function() { 
            clearInterval(timer); 
            timer = setInterval(youanniuyewu,2000); 
          } 
        ); 
 
 
        $(".you").click(youanniuyewu); 
        function youanniuyewu(){ 
            if(!$(".tuul li").is(":animated") || shangdi == true){ 
              if(nowimg < 8){ 
                nowimg ++; 
              }else{ 
                nowimg = 0; 
              } 
              $(".xiaoyuandian li").eq(nowimg).addClass("cur").siblings().removeClass("cur"); 
 
              //先交换位置 
              $(".no1").animate(json0,sudu); 
              $(".no2").animate(json1,sudu); 
              $(".no3").animate(json2,sudu); 
              $(".no4").animate(json3,sudu); 
              $(".no0").css(json4); 
               
              //再交换身份 
              $(".no0").attr("class","waiting"); 
              $(".no1").attr("class","no0"); 
              $(".no2").attr("class","no1"); 
              $(".no3").attr("class","no2"); 
              $(".no4").attr("class","no3"); 
              //上面的交换身份，把no0搞没了！所以，我们让no1前面那个人改名为no0 
              if($(".no3").next().length != 0){ 
                //如果no3后面有人，那么改变这个人的姓名为no4 
                $(".no3").next().attr("class","no4"); 
              }else{ 
                //no3前面没人，那么改变此时队列最开头的那个人的名字为no0 
                $(".tuul li:first").attr("class","no4"); 
              } 
               
              //发现写完上面的程序之后，no6的行内样式还是json0的位置，所以强制： 
              $(".no4").css(json4); 
            } 
              
          } 
 
        $(".zuo").click( 
          function(){ 
              
            if(!$(".tuul li").is(":animated") || shangdi == true){ 
 
              if(nowimg > 0){ 
                nowimg --; 
              }else{ 
                nowimg = 8; 
              } 
              $(".xiaoyuandian li").eq(nowimg).addClass("cur").siblings().removeClass("cur"); 
              //先交换位置: 
              $(".no0").animate(json1,sudu); 
              $(".no1").animate(json2,sudu); 
              $(".no2").animate(json3,sudu); 
              $(".no3").animate(json4,sudu); 
              $(".no4").css(json0); 
 
              //再交换身份 
              $(".no4").attr("class","waiting"); 
              $(".no3").attr("class","no4"); 
              $(".no2").attr("class","no3"); 
              $(".no1").attr("class","no2"); 
              $(".no0").attr("class","no1"); 
 
              //上面的交换身份，把no0搞没了！所以，我们让no1前面那个人改名为no0 
              if($(".no1").prev().length != 0){ 
                //如果no1前面有人，那么改变这个人的姓名为no0 
                $(".no1").prev().attr("class","no0"); 
              }else{ 
                //no1前面没人，那么改变此时队列最后的那个人的名字为no0 
                $(".tuul li:last").attr("class","no0"); 
              } 
 
              $(".no0").css(json0); 
            } 
              
          } 
        ); 
 
        $("#youku .xiaoyuandian li").click( 
          function(){ 
            sudu = 100; //临时把这个速度变化一下 
            shangdi = true; //flag 
 
            var yonghuandexuhao = $(this).index(); 
            if(yonghuandexuhao > nowimg ){ 
              var cishu = yonghuandexuhao - nowimg; 
              console.log("主人，我已经通知上帝帮你按右按钮" + cishu + "次"); 
 
              for(var i = 1 ; i<= cishu ; i++){ 
                $(".you").trigger("click"); //让上帝帮你按一次又按钮 
              } 
 
            }else{ 
              var cishu = nowimg - yonghuandexuhao; 
              console.log("主人，我已经通知上帝帮你按左按钮" + cishu + "次"); 
              for(var i = 1 ; i<= cishu ; i++){ 
                $(".zuo").trigger("click"); //让上帝帮你按一次又按钮 
              } 
            } 
            nowimg = yonghuandexuhao; 
            sudu = 600; //再把速度恢复 
            shangdi = false; 
          } 
           
        ); 
      } 
    ); 
  </script>

Hier erkläre ich hauptsächlich zwei Punkte:

1. Die Definition der Daten json0, json1, json2, json3, json4 stimmt mit der obigen Definition in CSS überein und dient der Erleichterung Umschalten Die absolute Position jedes Bildes wird im Folgenden ausführlich vorgestellt.

2. Erklären Sie hauptsächlich das Klickereignis mit der rechten Maustaste, bei dem es sich um die Youanniuyewu-Methode handelt.

2-1) Einfache Verarbeitung des nowImg-Index:

Wenn es nicht der letzte ist, klicken Sie auf die „rechte Schaltfläche“, dann wird der nowImg-Wert um 1 erhöht. Wenn es das letzte ist, beginnt nowImg bei 0.

if(nowimg < 8){ 
  nowimg ++; 
}else{ 
  nowimg = 0; 
}

2-2) Klicken Sie auf die „rechte Schaltfläche“. Bezüglich der Verarbeitung von Paging-Indikatoren:

Markieren Sie die Anzeigeschaltfläche, die dem aktuell angezeigten Bild entspricht, und die Geschwisterknoten sind normal zeigen.

$(".xiaoyuandian li").eq(nowimg).addClass("cur").siblings().removeClass("cur");

2-3) Bildpositionen tauschen:

Die ersten vier Sätze animieren den Effekt des Verschiebens des Bildes. Im statischen Zustand werden drei Bilder vor unseren Augen angezeigt. In der Bewegung können wir uns vorstellen, dass während der Ausführung der oben genannten vier Codesätze das Analysediagramm angezeigt wird ist wie folgt:

//先交换位置 
$(".no1").animate(json0,sudu); 
$(".no2").animate(json1,sudu); 
$(".no3").animate(json2,sudu); 
$(".no4").animate(json3,sudu); 
$(".no0").css(json4);

Das heißt, während der Ausführung der Animation verlässt das Bild „Nr. 1“ nach und nach den sichtbaren Bereich des Bildschirms. Gleichzeitig wird das Bild „Nr. 4“ nach und nach im sichtbaren Bereich angezeigt den Bildschirm.

而在动画执行的过程中，"no0" 的这张图片早就定位到 "no4" 的位置(此时在可视范围之外，因为这里的animate动画是异步执行的，不会延迟$(.no0).css(json4)这句代码的执行。当这一组代码执行完毕后，剖析图如下：

此时，我们再将那些处于 "waiting" 状态的图片考虑进来，则此时的剖析图如下：

2-4）以上流程执行完毕后，是完成了一次轮播效果，但是此时各个图片的牌号顺序已经被打乱，为了使得轮播继续下去，我们应该将牌号再 "恢复" 过来。所以我们可以添加以下代码：

//再交换身份 
$(".no0").attr("class","waiting"); 
$(".no1").attr("class","no0"); 
$(".no2").attr("class","no1"); 
$(".no3").attr("class","no2"); 
$(".no4").attr("class","no3");

上面的代码执行后，意味着将上图中 "no0" 这张图片拉入到 "waiting" 区域，而其他四个的编号则依次往前推算。执行完毕后，剖析图如下：

正如上图所示，"活跃"状态的5张图片，最后一张现在也变成了 "waiting" 状态，所以需要有人替补上去，才能继续动画的执行。很显然，应该拿 "waiting" 列表的第一张，也就是 "活跃" 状态的后面一张图片 "顶替" 上去；如果后面没有 "waiting" 状态的图片了，说明这些 "waiting" 状态的图片全部 "跑到" class 为 tuul所有列表的前面去了，那就抓取这些列表的第一张作为 "顶替者"。代码如下：

if($(".no3").next().length != 0){ 
  //如果no3后面有人，那么改变这个人的姓名为no4 
  $(".no3").next().attr("class","no4"); 
}else{ 
  //no3前面没人，那么改变此时队列最开头的那个人的名字为no0 
  $(".tuul li:first").attr("class","no4"); 
} 
               
//发现写完上面的程序之后，no6的行内样式还是json0的位置，所以强制： 
$(".no4").css(json4);

这里需要注意的是：虽然已经经历了很多步奏的位置信息的改变及牌号的改变，但是刚刚被拉入等待区域的那张图片在li中的与兄弟节点的位置关系并没有发生改变，只是class属性变成了 "waiting". 即此时的tuul中li的代码结构如下：

<ul class="tuul"> 
  <li class="waiting"><a href="#"><img src="images/0.jpg" /></a></li> 
  <li class="no0"><a href="#"><img src="images/1.jpg" /></a></li> 
  <li class="no1"><a href="#"><img src="images/2.jpg" /></a></li> 
  <li class="no2"><a href="#"><img src="images/3.jpg" /></a></li> 
  <li class="no3"><a href="#"><img src="images/4.jpg" /></a></li> 
  <li class="no4"><a href="#"><img src="images/5.jpg" /></a></li> 
  <li class="waiting"><a href="#"><img src="images/6.jpg" /></a></li> 
  <li class="waiting"><a href="#"><img src="images/7.jpg" /></a></li> 
  <li class="waiting"><a href="#"><img src="images/8.jpg" /></a></li> 
</ul>

执行完以上代码后，剖析图如下：

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

In Verbindung stehende Artikel

Mehr sehen