So implementieren Sie den Bildkarusselleffekt-js-Tutorial-php.cn

So implementieren Sie den Bildkarusselleffekt

小云云

Freigeben： 2018-01-12 10:43:54

Original

4389 Leute haben es durchsucht

Wie realisiert man den Bildkarusselleffekt? In diesem Artikel werden hauptsächlich das Produktionsprinzip und der Implementierungscode von JQuery vorgestellt, um den Bildkarusselleffekt zu realisieren. Der Quellcode-Download ist am Ende des Artikels angehängt Wert. Werfen wir einen Blick mit dem folgenden Editor. Ich hoffe, er kann allen helfen.

Es ist wirklich praktisch, JQuery zum Betreiben von DOM zu verwenden, und JQuery bietet eine sehr benutzerfreundliche API, um unsere verschiedenen Anforderungen zu erfüllen, was den JS-Code erheblich vereinfacht.

Produktionsprinzip:

Hier eine kurze Einführung in den gesamten Prozess:

Alle Bilder außer dem ersten ausblenden

2 Die Alt-Informationen des ersten Bildes werden in der Informationsleiste angezeigt, und es werden Klickereignisse

3 hinzugefügt, für die 4 Schaltflächen werden Klick-Listener hinzugefügt, auf die entsprechenden Schaltflächen geklickt und zum Anzeigen die Methoden fadeOut und fadeIn verwendet das Bild

4. setInterval einstellen und die Umschaltfunktion regelmäßig ausführen

Codebeschreibung:

filter(":visible"): Alle sichtbaren Elemente abrufen

unbind(): Vom Matching Löschen Sie das gebundene Ereignis im Element

Geschwister: Rufen Sie einen Elementsatz ab, der alle eindeutigen Geschwisterelemente jedes Elements im passenden Elementsatz enthält

Programmquellcode

HTML-Teil:

<body>
<p id="banner"> 
 <p id="banner_bg"></p>
 <p id="banner_info"></p>
 <ul>
  <li class="on">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
 </ul>
 <p id="banner_list">
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="imgs/img_1.jpg" title="图片" alt="图片"/></a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="imgs/img_2.jpg" title="图片" alt="图片"/></a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="imgs/img_3.jpg" title="图片" alt="图片"/></a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="imgs/img_4.jpg" title="图片" alt="图片"/></a>
 </p>
</p>
</body>

Nach dem Login kopieren

CSS-Teil:

<style type="text/css">
#banner {position:relative; width:478px; height:286px; border:1px solid #666; overflow:hidden;}
#banner_list img {border:0px;}
#banner_bg {position:absolute; bottom:0;background-color:#000;height:30px;filter: Alpha(Opacity=30);opacity:0.3;z-index:1000;
cursor:pointer; width:478px;}
#banner_info{position:absolute; bottom:0; left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer}
#banner_text {position:absolute;width:120px;z-index:1002; right:3px; bottom:3px;}
#banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; border:1px solid #fff;z-index:1002;
   margin:0; padding:0; bottom:3px; right:5px;}
#banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;border:#e5eaff 1px solid;background:#6f4f67;cursor:pointer}
#banner ul li.on { background:#900}
#banner_list a{position:absolute;}
</style>

Nach dem Login kopieren

Javascript-Code:

<script type="text/javascript">
 var t = n =0, count;
 $(document).ready(function(){ 
  count=$("#banner_list a").length;
  $("#banner_list a:not(:first-child)").hide();
  $("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
  $("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")});
  $("#banner li").click(function() {
   var i = $(this).text() -1;//获取Li元素内的值，即1，2，3，4
   n = i;
   if (i >= count) return;
   $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));
   $("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr('href'), "_blank")})
   $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
   document.getElementById("banner").style.background="";
   $(this).toggleClass("on");
   $(this).siblings().removeAttr("class");
  });
  t = setInterval("showAuto()", 4000);
  $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
 })
 
 function showAuto()
 {
  n = n >=(count -1) ?0 : ++n;
  $("#banner li").eq(n).trigger('click');
 }
</script>

Nach dem Login kopieren

Verwandte Empfehlungen:

Tutorial zur Implementierung der Bildkarussell-Umschaltfunktion mithilfe der WeChat Xiaocheng-Swiper-Komponente

Ein einfaches Beispiel für die Verwendung von JavaScript zur Implementierung des Bildkarusselleffekts

So implementieren Sie es mit jQuery und CSS. Ein einfaches Beispiel für den Bildkarusselleffekt

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Bildkarusselleffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!