Heim >Web-Frontend >js-Tutorial >So implementieren Sie den Bildkarusselleffekt

So implementieren Sie den Bildkarusselleffekt

小云云Original: 2018-01-12 10:43:544367Durchsuche

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>

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>

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>

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!

JavaScript jquery css html Filter JS 事件 dom

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：Tutorial, wie jQuery automatisch ein Ereignis ausführen kann, nachdem das HTML-Dokument geladen wurdeNächster Artikel：Tutorial, wie jQuery automatisch ein Ereignis ausführen kann, nachdem das HTML-Dokument geladen wurde

In Verbindung stehende Artikel

Mehr sehen