Maison > Article > interface Web > Swiper implémente la rotation des images publicitaires mobiles

Swiper implémente la rotation des images publicitaires mobiles

php中世界最好的语言original: 2018-04-13 13:44:132003parcourir

Cette fois, je vais vous présenter Swiper pour mettre en œuvre un carrousel d'images publicitaires mobiles. Quelles sont les précautions pour que Swiper mette en œuvre un carrousel d'images publicitaires mobiles. Jetons un coup d'œil. .

1. Comprend principalement des modules :

swiper : fait référence au glissement et à la commutation (l'objet coulissant entier, parfois spécifiquement fait référence au processus (transition) dans lequel le curseur avance encore après avoir été relâché jusqu'à ce qu'il s'adapte au bord)
conteneur : fait référence au conteneur (le conteneur du swiper inclut la diapositive) Collection (wrapper), pagination, bouton avant, etc.)
wrapper : fait référence à une collection contenant (des objets touchables, des zones touchables et des blocs en mouvement, qui provoqueront un déplacement avec le changement de diapositive pendant la transition)
slider : fait référence au slider (un des blocs commutés, qui peut contenir du texte, des images, des éléments html ou un autre swiper
pagination : fait référence au paginateur (indique le nombre de slides et la diapositive actuellement active) )
actif : fait référence à actif, activé (la diapositive visible (visible) est active, lorsqu'il y a plus d'une diapositive visible, celle la plus à gauche est active par défaut)
rappel : fait référence à fonction de rappel (déclenchée dans certaines circonstances)

2. Carrousel simple , comme indiqué ci-dessous :

<!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. Autres paramètres en 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/*开启阴影*/ 
 } 
 })

Remarque : Avant d'utiliser swiper, vous devez introduire swiper.css, swiper.js et jQuery

Je pense que vous maîtrisez la méthode de lecture de cet article. Pour plus de passionnant, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Comment changer les boutons fléchés avec le plug-in swiper

Comment utiliser la communication des composants Vue Autobus

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser le bus de communication des composants VueArticle suivant：Comment utiliser le bus de communication des composants Vue

Articles Liés

Voir plus