Heim > Artikel > Web-Frontend > So implementieren Sie die automatische unbegrenzte Bilddrehung mit dem Swiper
So implementieren Sie die automatische unbegrenzte Bilddrehung mit dem Swiper
- php中世界最好的语言Original
- 2018-05-28 14:13:266452Durchsuche
Dieses Mal zeige ich Ihnen, wie Sie eine unbegrenzte automatische Bildrotation mit dem Swiper implementieren. Vollständiger Code
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="swiper/css/swiper-3.4.2.min.css" rel="external nofollow" >
<script src="swiper/js/swiper-3.4.2.min.js"></script>
<style type="text/css">
.swiper-container {
width: 900px;
height: 300px;
}
</style>
</head>
<body>
<p class="swiper-container">
<p class="swiper-wrapper">
<p class="swiper-slide box1"><img src="img/a.jpg"></p>
<p class="swiper-slide box2" ><img src="img/b.jpg"></p>
<p class="swiper-slide box3"><img src="img/c.jpg"></p>
</p>
<!-- 如果需要分页器 -->
<p class="swiper-pagination"></p>
<!-- 如果需要导航按钮 -->
<p class="swiper-button-prev"></p>
<p class="swiper-button-next"></p>
<!-- 如果需要滚动条 -->
<!--<p class="swiper-scrollbar"></p>-->
</p>
</p>
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
loop: true,
// 如果需要分页器
pagination: '.swiper-pagination',
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
autoplay : 1000,
speed:100,
// 如果需要滚动条
// scrollbar: '.swiper-scrollbar',
effect : 'coverflow',
slidesPerView: 3,
centeredSlides: true,
coverflow: {
rotate: 30,
stretch: 10,
depth: 60,
modifier: 2,
slideShadows : true
}
})
</script>
</body>
</html>
Wie man mit Swiper Karussells schreibtJeder hat schon einmal Karussells geschrieben, ich glaube, Sie schreiben Karussells, wahrscheinlich schon Als nächstes erzähle ich Ihnen von einem praktischen und schnellen Karusselldiagramm!
Swiper wird häufig zum Touch-Sliding von Inhalten auf mobilen Websites verwendet
1 Der erste Schritt besteht darin, das CSS---swiper.css-Plug-in und JQ---swiper einzuführen. js-Plugin,
Dann habe ich angefangen, Karussellbilder zu schreiben
<p class="swiper-container">--首先定义一个容器 <p class="swiper-wrapper"> <p class="swiper-slide"><img src="" /></p> --添加图片 <p class="swiper-slide"><img src="" /></p> <p class="swiper-slide"><img src="" /></p> </p> <p class="swiper-pagination"></p>--小圆点分页器 <p class="swiper-button-prev"></p>--上一页 <p class="swiper-button-next"></p>--下一页 </p>
Wenn Sie möchten, dass es sich bewegt, dann schreiben Sie weiter js
var mySwiper = new Swiper(".swiper-container",{
autoplay:1000,--每秒中轮播一次
loop:true,--可以让图片循环轮播
autoplayDisableOnInteraction:false,--在点击之后可以继续实现轮播
pagination:".swiper-pagination",--让小圆点显示
paginationClickable:true,--实现小圆点点击
prevButton:".swiper-button-prev",--实现上一页的点击
nextButton:".swiper-button-next",--实现下一页的点击
effect:"flip"--可以实现3D效果的轮播
})
Swiper-Karussell hat auch seine Vorteile:
1.Swiper ist ein gleitendes Spezialeffekt-Plug-in, das ausschließlich mit
Javascript erstellt wurde und auf Mobiltelefone, Tablets und andere mobile Endgeräte abzielt. 2.Swiper kann gängige Effekte wie Touchscreen-Fokusbild, Touchscreen-Tab-Wechsel, Touchscreen-Mehrbildwechsel und andere gängige Effekte erzielen. 3.Swiper ist Open Source, kostenlos, stabil, einfach zu bedienen und leistungsstark. Es ist eine wichtige Wahl für die Erstellung von Websites für mobile Endgeräte!
Es gibt auch Mängel: (Bei Verwendung der Ajax-Anfrage des Swiper-Karussell-Plug-Ins zum Laden von Bildern kann das Problem nicht verschoben werden.)
Endlich die Swiper-Plug-In-API gefunden, die über Attribute verfügt, die das Plug-In automatisch
initialisieren können
Nach dem Hinzufügen von Observer: true ist das Problem gelöst! var mySwiper = new Swiper ('.swiper-container', {
pagination: '.swiper-pagination',
autoplay: 5000,
loop: true,
observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper
})Swiper verfügt über umfangreiche API-Schnittstellen. (Aber es gibt nicht viele chinesische Dokumente, daher konnte ich sie nicht finden.) Es ermöglicht Entwicklern, ihre eigene einzigartige Paginierung, Auf- und Ab-Schieberegler
und 4
Rückruffunktionen zu generieren: 1.onTouchStart 2.onTouchMove 3.onTouchEnd
4.onSlideSwitch.
Der obige Inhalt ist meine persönliche Zusammenfassung, ich hoffe, er wird Ihnen hilfreich sein!
Swiper-Plug-in-Karusselldiagramm, die Standardreihenfolge des Karussells ist von rechts nach links, Nr . Ein Bild, das zweite Bild, das dritte Bild, und dann können Sie mit bloßem Auge sehen, dass Sie vom dritten Bild zum ersten Bild von links nach rechts zurückspulen. Dies führt zu einem etwas unbefriedigenden visuellen Erlebnis,
, aber die Eigenschaften von Swiper selbst werden in ein Endlosschleifenkarussell geändert.
HTML-Code
<p class="course-banner-box"> <p class="swiper-container"> <p class="swiper-wrapper"> <!--四张轮播图--> <p class="swiper-slide slide1"></p> <p class="swiper-slide slide2"></p> <p class="swiper-slide slide3"></p> <p class="swiper-slide slide4"></p> </p> <!-- Add Pagination --> <p class="swiper-pagination"></p> <!-- Add Arrows --> <p class="button-box"> <p class="button"> <!--左右按钮--> <p class="swiper-button-next"></p> <p class="swiper-button-prev"></p> </p> </p> </p> </p>
Skriptcode
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',//pagination分页器
nextButton: '.swiper-button-next',//前进后退按钮
prevButton: '.swiper-button-prev',
paginationClickable: true,//参数设置为true时，点击分页器的指示点分页器会控制Swiper切换
spaceBetween: 30,//slide之间的距离（单位px）。
centeredSlides: true,//设定为true时，活动块会居中，而不是默认状态下的居左。
loop : true,//复制多份循环(这里就是让轮播看起来是循环的，去掉这个就恢复了默认的swiper轮播)
autoplay: 3000,//自动切换的时间间隔（单位ms），不设定该参数slide不会自动切换。
autoplayDisableOnInteraction: false//点击后打断auto-play
});
</script>
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben, achten Sie bitte auf andere verwandte Themen Artikel auf der chinesischen PHP-Website!
Empfohlene Lektüre:
So verwenden Sie Swiper in VueSo kapseln Sie Angular-NetzwerkanfragenDas obige ist der detaillierte Inhalt vonSo implementieren Sie die automatische unbegrenzte Bilddrehung mit dem Swiper. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!