suchen

Heim  >  Artikel  >  Web-Frontend  >  JQuery implementiert den Bildkarussell-Effekt_jquery

JQuery implementiert den Bildkarussell-Effekt_jquery

WBOY
WBOYOriginal
2016-05-16 15:39:151370Durchsuche

[Kurze Beschreibung des Prinzips]

Hier ist eine kurze Beschreibung des gesamten Prozesses:

1, alle Bilder außer dem ersten ausblenden,

2. Rufen Sie die Alt-Informationen des ersten Bildes ab, zeigen Sie sie in der Informationsleiste an und fügen Sie ein Klickereignis hinzu

3. Fügen Sie Click-Listening für die 4 Schaltflächen hinzu, klicken Sie auf die entsprechende Schaltfläche und verwenden Sie die FadeOut- und FadeIn-Methoden, um das Bild anzuzeigen

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

[Codebeschreibung]

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

unbind(): Entfernt das gebundene Ereignis aus dem passenden Element

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

Beispiel: Suchen Sie nach Elementen mit dem ausgewählten Klassennamen unter allen Geschwisterelementen jedes Div. 

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

Führen Sie $("div").siblings() aus, das Ergebnis

[ <p>Hello</p>, <p>And Again</p> ]

[Programmquellcode]
HTML-Teil: 

<body>
<div id="banner"> 
<div id="banner_bg"></div><!--标题背景-->
<div id="banner_info"></div><!--标题-->
<ul>
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div id="banner_list">
<a href="#" target="_blank"><img src="imgs/p1.jpg" title="JQuery implementiert den Bildkarussell-Effekt_jquery" alt="JQuery implementiert den Bildkarussell-Effekt_jquery"/></a>
<a href="#" target="_blank"><img src="imgs/p5.jpg" title="JQuery implementiert den Bildkarussell-Effekt_jquery" alt="JQuery implementiert den Bildkarussell-Effekt_jquery"/></a>
<a href="#" target="_blank"><img src="imgs/p3.jpg" title="JQuery implementiert den Bildkarussell-Effekt_jquery" alt="JQuery implementiert den Bildkarussell-Effekt_jquery"/></a>
<a href="#" target="_blank"><img src="imgs/p4.jpg" title="JQuery implementiert den Bildkarussell-Effekt_jquery" alt="JQuery implementiert den Bildkarussell-Effekt_jquery"/></a>
</div>
</div>
</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>

JS-Teil:

<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) &#63;0 : ++n;
$("#banner li").eq(n).trigger('click');
}
</script>

Das Obige ist der gesamte Prozess der Implementierung eines Bildkarussells mit JQuery. Ich hoffe, dass es für das Lernen aller hilfreich sein wird.

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：JavaScript kapselt einen Tab-Effekt, Quellcode-Sharing_Javascript-FähigkeitenNächster Artikel：JavaScript kapselt einen Tab-Effekt, Quellcode-Sharing_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen