Maison > interface Web > js tutoriel > le corps du texte

Native js implémente des images de carrousel de développement mobile et des compétences d'effets de glissement d'album_javascript

WBOY
Libérer: 2016-05-16 16:03:21
original
1471 Les gens l'ont consulté

Comment utiliser :

Citer respectivement les fichiers css et js, tels que :

<link rel="stylesheet" type="text/css" href="css/photoSlider.min.css" />
<script src="js/photoSlider.min.js" type="text/javascript" charset="utf-8"></script>

Copier après la connexion

html :

<li><a href="/"><img src="img/1.jpg" /></a></li>
<li><a href="/"><img src="img/2.jpg" /></a></li>
<li><a href="/"><img src="img/3.jpg" /></a></li>
Copier après la connexion

javascript :

window.onload=function(){
photoSlide({
wrap: document.getElementById('photo'),//最外层容器
loop: true,//设置无缝循环
autoPlay:true,//自动轮播
autoTime:4000,//轮播时间间隔
pagination:true //点状态列表
});
}

Copier après la connexion

Exemple complet :






photoSlider-纯js移动开发轮播图、相册滑动插件













    <li><a href="/"><img src="img/1.jpg" /></a></li> <li><a href="/"><img src="img/2.jpg" /></a></li> <li><a href="/"><img src="img/3.jpg" /></a></li>
Copier après la connexion

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!