suchen

Heim >Web-Frontend >js-Tutorial >Swiper implementiert die Bildrotation für mobile Werbung

Swiper implementiert die Bildrotation für mobile Werbung

php中世界最好的语言
php中世界最好的语言Original
2018-04-13 13:44:132084Durchsuche

Dieses Mal werde ich Ihnen Swiper zur Implementierung eines mobilen Werbebildkarussells vorstellen. Was sind die Vorsichtsmaßnahmen für Swiper, um ein mobiles Werbebildkarussell zu implementieren? . .

1. Beinhaltet hauptsächlich Module:

Swiper: bezieht sich auf das Schieben und Umschalten (das gesamte Schiebeobjekt, manchmal speziell auf den Prozess (Übergang), bei dem sich der Schieber nach dem Loslassen immer noch vorwärts bewegt, bis er an die Kante passt)

Container: bezieht sich auf den Container (Swiper-Container). Enthält die Folie) Sammlung (Wrapper, Paginierung, Vorwärtsschaltfläche usw.)
Wrapper: bezieht sich auf eine Sammlung, die (berührbare Objekte, berührbare Bereiche und bewegliche Blöcke, die beim Folienwechsel während des Übergangs zu einer Verschiebung führen) enthält
Slider: bezieht sich auf den Slider (einer der umschaltbaren Blöcke, der Text, Bilder,
HTML-Elemente oder einen anderen Swiper enthalten kannPaginierung: bezieht sich auf den Paginator (gibt die Anzahl der Folien und die aktuelle an). aktive Folie) )
aktiv: bezieht sich auf aktive, aktivierte (sichtbare (sichtbare) Folie ist aktiv, wenn mehr als eine sichtbare Folie vorhanden ist, ist standardmäßig die ganz linke Folie aktiv)
Rückruf: bezieht sich auf
Rückruffunktion (unter bestimmten Umständen ausgelöst)

2. Einfaches Karussell , wie unten gezeigt: 

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <link rel="stylesheet" href="swiper-3.2.7.min.css" rel="external nofollow" > 
 <script type="text/javascript" src="jquery-1.7.1.js"></script> 
 <script type="text/javascript" src="swiper-3.2.7.min.js"></script> 
</head> 
<body> 
<p class="swiper-container"style="width: 38%;"><!--swiper容器[可以随意更改该容器的样式--> 
 <p class="swiper-wrapper"> 
 <p class="swiper-slide"><img src="Walks-poster.png"></p> 
 <p class="swiper-slide"><img src="Walks-poster.png"></p> 
 <p class="swiper-slide"><img src="Walks-poster.png"></p> 
 </p> 
 <p class="swiper-pagination" style="width: 100px;float: right"></p><!--分页器-->、 
 <p class="swiper-button-prev"></p><!--前进按钮--> 
 <p class="swiper-button-next"></p><!--后退按钮--> 
</p> 
 
<script type="text/javascript"> 
 var mySwiper = new Swiper(".swiper-container",{ 
 direction:"horizontal",/*横向滑动*/ 
 loop:true,/*形成环路（即：可以从最后一张图跳转到第一张图*/ 
 pagination:".swiper-pagination",/*分页器*/ 
 prevButton:".swiper-button-prev",/*前进按钮*/ 
 nextButton:".swiper-button-next",/*后退按钮*/ 
 autoplay:3000/*每隔3秒自动播放*/ 
 }) 
</script> 
</body> 
</html>
3. Andere Parameter in js: 

var mySwiper = new Swiper(".swiper-container",{ 
 effect:"coverflow",/*轮播的效果：（1）fade:淡入淡出；（2）cube:立方体；（3）coverflow:立体照片*/ 
 slidesPerView:3,/*网格分布：1为在容器区域出现一张图；2：在容器区域出现两张图；3：在容器区域出现三张图*/ 
 centeredSlides:true,/*默认第一块居左，设置为true后则是居中显示*/ 
 coverflow:{ 
  rotate:30,/*3d旋转角度设置为30度*/ 
  stretch:10,/*每个slide之间的拉伸值，值越大靠得越近*/ 
  depth:60,/*位置深度，值越大离Z轴越远，看起来越小*/ 
  modifier:2, 
  slideshadows:true/*开启阴影*/ 
 } 
 })
Hinweis: Bevor Sie Swiper verwenden, müssen Sie Swiper.css, Swiper.js und jQuery einführen                                        

Ich glaube, Sie beherrschen die Methode zum Lesen dieses Artikels. Weitere spannende Artikel finden Sie auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So wechseln Sie die Pfeiltasten mit dem Swiper-Plug-in


So verwenden Sie die Vue-Komponentenkommunikation Bus


Das obige ist der detaillierte Inhalt vonSwiper implementiert die Bildrotation für mobile Werbung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：So verwenden Sie den Vue-KomponentenkommunikationsbusNächster Artikel：So verwenden Sie den Vue-Komponentenkommunikationsbus

In Verbindung stehende Artikel

Mehr sehen