Das Beispiel in diesem Artikel beschreibt die Methode zur Verwendung von js zur Implementierung eines Karussellbildeffekts, der das Schieben auf Mobiltelefonen unterstützt. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Der Betriebseffekt ist wie folgt:
Klicken Sie hier für den vollständigen BeispielcodeDownload von dieser Website.
Verwendungsbeispiele:
<script type="text/javascript" src="../src/zepto.js"></script>
<script type="text/javascript" src="../src/carousel-image.js"></script>
<script>
$('.carousel-image').CarouselImage({
num :$('.carousel-num')
});
</script>oder requirejs:
<div class="carousel-image">
<div>
<a>
<img src="http://www.yoursiteweb.com/images/1430073193462.jpg"/>
</a>
<a>
<img src="http://www.yoursiteweb.com/images/1430073252953.png"/>
</a>
<a>
<img src="http://www.yoursiteweb.com/images/1430073111420.jpg"/>
</a>
</div>
<div class="carousel-num">
</div>
</div>
<script type="text/javascript" src="../src/zepto.js"></script>
<script type="text/javascript" src="../src/require.js"></script>
<script>
requirejs.config({
//By default load any module IDs from js/lib
baseUrl: '../src',
paths: {
$: 'zepto'
}
});
require(['carousel-image',"$"], function(CarouselImage,$) {
var cs = new CarouselImage();
cs.init({
target:$('.carousel-image'),
num:$('.carousel-num')
});
});
</script>API-Eigenschaften, Methoden und Rückrufe:
Ziel:
Gibt an, dass das Element in diesem Container das Ereignis auslöst. Es sollte über untergeordnete Container verfügen, um die Animationsoptimierung zu erleichtern
num:
Die ursprüngliche Absicht bestand darin, die Nummer des aktuellen Index anzuzeigen, aber jetzt wird die Nummer durch den Stil ausgeblendet. Wenn Sie den Nummernstil anzeigen möchten, können Sie die Stildatei selbst ändern
Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
