jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems-js-Tutorial-php.cn

Dieser Artikel beschreibt das Beispiel von jquery, das den Bildwechseleffekt des LED-Werbetafel-Rotationssystems realisiert, und teilt es als Referenz mit allen. Die Details sind wie folgt:
js simuliert den Wechseleffekt von Werbung auf einem riesigen Bildschirm am Straßenrand. Ich bin überzeugt, dass js das kann, und es hat einen realistischen Effekt, der einen sprachlos macht.
Der Bildwechseleffekt auf dem LED-Werbedisplay ähnelt der Szene. Der Effekt ist so schockierend, dass ich fassungslos war. Wenn Sie Spezialeffekte lieben, sollten Sie ihn sich nicht entgehen lassen.
Operationsrendering:

jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems

Tipps: Wenn der Browser nicht normal läuft, können Sie versuchen, den Browsermodus zu wechseln.
Der mit Ihnen geteilte Code für die JQuery-Implementierung des Bildwechseleffekts des LED-Werbetafel-Rotationssystems lautet wie folgt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems</title>
<link rel="stylesheet" href="css/lanrenzhijia.css" type="text/css" />
</head>
<body>
 <div class="palmtrees"></div>
  <div class="powerline"></div>
  <div class="city"></div>
  <div class="container">
   <div class="ad">
    <div id="ad_1" class="ad_1">
     <img  class="slice_1 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad1_slice01.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_2 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad1_slice02.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_3 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad1_slice03.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_4 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad1_slice04.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_5 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad1_slice05.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_6 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad1_slice06.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_7 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad1_slice07.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_8 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad1_slice08.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_9 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad1_slice09.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_10 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad1_slice10.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_11 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad1_slice11.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_12 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad1_slice12.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_13 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad1_slice13.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_14 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad1_slice14.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_15 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad1_slice15.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_16 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad1_slice16.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_17 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad1_slice17.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_18 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad1_slice18.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_19 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad1_slice19.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_20 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad1_slice20.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_21 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad1_slice21.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_22 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad1_slice22.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
    </div>
    <div id="ad_2" class="ad_2">
     <img  class="slice_1 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad2_slice01.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_2 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad2_slice02.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_3 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad2_slice03.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_4 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad2_slice04.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_5 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad2_slice05.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_6 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad2_slice06.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_7 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad2_slice07.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_8 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad2_slice08.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_9 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad2_slice09.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_10 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad2_slice10.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_11 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad2_slice11.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_12 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad2_slice12.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_13 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad2_slice13.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_14 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad2_slice14.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_15 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad2_slice15.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_16 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad2_slice16.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_17 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad2_slice17.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_18 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad2_slice18.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_19 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad2_slice19.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_20 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad2_slice20.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_21 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad2_slice21.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
     <img  class="slice_22 lazy"  src="/static/imghw/default1.png"  data-src="ads/ad2_slice22.jpg"   / alt="jquery implementiert den Bildwechseleffekt des LED-Werbetafel-Rotationssystems" >
    </div>
   </div>
  </div>
  <div class="billboard"></div>
  <script src="js/jquery-1.3.2.js" type="text/javascript"></script>
  <script>
$(function() {   
 $(&#39;#ad_1 > img&#39;).each(function(i,e){
  rotate($(this),500,3000,i);
 });
 function rotate(elem1,speed,timeout,i){
  elem1.animate({&#39;marginLeft&#39;:&#39;18px&#39;,&#39;width&#39;:&#39;0px&#39;},speed,function(){
   var other;
   if(elem1.parent().attr(&#39;id&#39;) == &#39;ad_1&#39;)
    other = $(&#39;#ad_2&#39;).children(&#39;img&#39;).eq(i);
   else
    other = $(&#39;#ad_1&#39;).children(&#39;img&#39;).eq(i);
    other.animate({&#39;marginLeft&#39;:&#39;0px&#39;,&#39;width&#39;:&#39;35px&#39;},speed,function(){
    var f = function() { rotate(other,speed,timeout,i) };
    setTimeout(f,timeout);
   });
  });
 }
});
  </script>
</body>
</html>

Nach dem Login kopieren

Oben ist der JQuery-Implementierungscode für den gemeinsam genutzten Bildwechseleffekt des LED-Werbetafel-Rotationssystems mit dir. Ich hoffe es gefällt dir.

Weitere JQuery-bezogene Artikel zur Realisierung des Bildwechseleffekts des LED-Werbetafel-Rotationssystems finden Sie auf der chinesischen PHP-Website!