Heim > Artikel > Web-Frontend > So implementieren Sie den Bildkarusselleffekt
So implementieren Sie den Bildkarusselleffekt
- 小云云Original
- 2018-01-12 10:43:544295Durchsuche
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:
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!