Das Beispiel in diesem Artikel beschreibt den js-Mausklick-Bildwechseleffekt. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Das Implementierungsprinzip ist sehr einfach. Nach dem Klicken auf das Bild wird jedem Bild eine Klasse zugewiesen, damit es so aussieht, als ob es auf der Oberfläche wäre Wechseln von Bildern.
Laufende Renderings: ------------------ -------------------------------------------------- ---------------
Tipps: Wenn der Browser nicht richtig funktioniert, können Sie versuchen, den Browsermodus zu wechseln.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js鼠标点击图片切换效果</title>
<style type="text/css">
*{margin:0;padding:0;border:none;outline:none;list-style:none;}
#wrapper {width:280px;margin:20px auto;}
#imageContainer {width:280px;height:280px;position:relative;overflow:hidden;cursor:pointer;}
#imageContainer img {position:absolute;top:0;left:0;z-index:1;}
#imageContainer img.active {z-index:3;}
</style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="imageContainer">
<img src="images/01.jpg" class="active" width="280" height="280" />
<img src="images/02.jpg" width="280" height="280" />
<img src="images/03.jpg" width="280" height="280" />
</div>
</div>
<script src="js/jquery.min.js"></script>
<script>
var imageObject = {
clickSwap : function(obj) {
obj.click(function() {
var activeImage = $(this).children('img.active');
activeImage.removeClass('active');
if (activeImage.next().length > 0) {
activeImage.next().addClass('active');
} else {
$(this).children('img:first-child').addClass('active');
}
return false;
});
}
};
$(function() {
imageObject.clickSwap($('#imageContainer'));
});
</script>
</body>
</html>
Die Rolle des Applet-Tags in HTML
Eine vollständige Liste häufig verwendeter öffentlicher DNS
So öffnen Sie eine Bak-Datei
PS-Tastenkombinationen für Helligkeit und Kontrast
Lösung für Sitzungsfehler
Handy-Bildschirm tft
Der Unterschied zwischen statischen Webseiten und dynamischen Webseiten
Der Unterschied zwischen Pfeilfunktionen und gewöhnlichen Funktionen
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
