Maison > Article > interface Web > Explication détaillée de l'utilisation de jquery pour créer des images de carrousel sur PC
Explication détaillée de l'utilisation de jquery pour créer des images de carrousel sur PC
- php中世界最好的语言original
- 2018-03-23 10:46:182188parcourir
Cette fois, je vais vous apporter une explication détaillée de la façon d'utiliser jquery pour créer un graphique carrousel côté PC. Quelles sont les précautions pour utiliser jquery pour créer un graphique carrousel côté PC. est un cas pratique. Levez-vous et jetez un œil.
Je n'ai pas été très occupé avec d'autres projets récemment. J'ai été chargé de créer une nouvelle page pour le projet de site officiel de l'entreprise (je n'ai jamais été impliqué dans le projet de site officiel de l'entreprise auparavant). endroit où les images du carrousel sont utilisées. Au début, je voulais l'utiliser directement. Ce serait bien d'implémenter le plug-in swiper.js, mais j'ai trouvé que swiper.js n'avait pas été introduit dans le projet de site officiel auparavant. en y réfléchissant, j'ai décidé de ne pas l'introduire pour éviter d'avoir à ajouter une autre requête réseau puisque jQuery a été utilisé dans le projet, utilisez simplement jQuery pour écrire une image carrousel.
Maintenant, sortez le code de l'image du carrousel que vous avez écrit séparément, faites une petite démo et enregistrez-la ici (les images de l'image du carrousel dans la démo ont été trouvées au hasard en ligne)
Réalisé effets :
1. Carrousel automatique (l'intervalle de temps du carrousel est personnalisé dans le code js)
2. Cliquez sur les boutons gauche et droit pour obtenir une commutation manuelle
3. . Le petit point en bas affiche l'état actif en fonction de la position de l'image commutée
4. La souris traverse la zone du carrousel, arrête le carrousel et quitte la zone du carrousel pour démarrer le carrousel
Les résultats du répertoire de codes sont les suivants :
1 index.html
Remarque : voici 5 images. à titre d'exemple, le carrousel réel sur la page montre aux utilisateurs 5 images différentes. Cependant, par souci de continuité de l'effet carrousel, une cinquième image est ajoutée devant la première image et après la cinquième image. il y a donc 7 images dans la structure de démonstration, et la taille de chaque image doit être la même (la largeur et la hauteur ici sont de 720*350px).<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>PC-jquery版轮播图</title> <link rel="stylesheet" href="css/style.css" rel="external nofollow" > </head> <body> <p class="layout"> <h2 style="text-align: center;">PC-jquery版轮播图</h2> <p class="slide" id="slide"> <p id="outer" class="outer"> <ul id="inner" class="inner"> <li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-5</p><img src="images/slide-5.jpg"></a></li> <li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-1</p><img src="images/slide-1.jpg"></a></li> <li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-2</p><img src="images/slide-2.jpg"></a></li> <li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-3</p><img src="images/slide-3.jpg"></a></li> <li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-4</p><img src="images/slide-4.jpg"></a></li> <li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-5</p><img src="images/slide-5.jpg"></a></li> <li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-1</p><img src="images/slide-1.jpg"></a></li> </ul> <!--底部小圆点--> <ol class="dot" id="dot"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> </ol> </p> <!--左右两侧的点击切换按钮--> <p class="arrow-box"> <p class="arrow arrow-l" id="arrow_l">‹</p> <p class="arrow arrow-r" id="arrow_r">›</p> </p> </p> </p> <script src="js/jquery.min.js"></script> <script src="js/index.js"></script> </body> </html>
2. style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.layout {
width: 1000px;
margin: 30px auto;
}
ul,ol,li {
list-style: none;
}
.slide {
position: relative;
width: 900px;
margin:auto;
}
.slide .outer {
position: relative;
margin: 30px auto;
width: 720px;
height: 400px;
overflow: hidden;
}
.slide .outer .inner {
width: 5040px;
height: 350px;
position: absolute;
left: -720px;
top: 0;
}
.slide .outer .inner li {
float: left;
height: 350px;
}
.slide .outer .inner li a {
display: block;
position: relative;
width: 100%;
height: 100%;
}
.slide .outer .inner li a p {
position: absolute;
left: 0;
bottom: 0;
color: #fff;
font-size: 18px;
width: 720px;
height: 80px;
line-height: 80px;
padding-left: 50px;
background: linear-gradient(180deg,rgba(0,0,0,0), rgba(0,0,0,0.5));
}
.slide .outer .dot {
margin-top: 365px;
text-align: center;
}
.slide .outer .dot li {
height: 6px;
width: 6px;
border-radius: 3px;
background-color: #d2cbcb;
display: inline-block;
margin: 0 3px;
}
.slide .outer .dot li.active {
background-color: #6e5ca5;
}
.slide .arrow-box {
position: absolute;
width: 900px;
height: 60px;
top: 150px;
left: 0;
}
.slide .arrow-box .arrow {
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
border-radius: 30px;
background-color: #dde2e6;
font-size: 60px;
color: #999;
cursor: pointer;
}
.slide .arrow-box .arrow.arrow-l {
float: left;
}
.slide .arrow-box .arrow.arrow-r {
float: right;
}
3.index.js
Remarque : code js. , chaque variable a été annotée. Afin d'éviter que l'animation ne s'arrête en raison de plusieurs clics rapides, stop(false,true) est appelé ici à chaque fois que l'image est changée. Mais veuillez noter que lorsque vous faites défiler vers la gauche, après avoir fait défiler jusqu'à la dernière image, n'utilisez pas stop(false,true) lors du prochain changement, mais localisez instantanément la première image (en fait la troisième image dans la structure dom (deux images). ), de même, lors du défilement vers la droite, après avoir défilé jusqu'à la première image, il n'est pas nécessaire de s'arrêter (faux, vrai) lors du prochain basculement, mais de localiser instantanément la dernière image (en fait une structure dom de l'avant-dernière image dans ).var interval = 3000; //轮播间隔时间
var arrowL = $('#arrow_l'); //左侧箭头
var arrowR = $('#arrow_r'); //右侧箭头
var slideBox = $('#slide'); //轮播图区域
var innerBox = $('#inner'); //内层大盒子
var img = innerBox.children('li'); //每个图片
var dot = $('#dot'); //小圆点盒子
var imgW = $(img[0]).outerWidth(); //每个li标签的宽度
var imgCount = 5; //总图片个数（不同图片的个数）（实际dom上是有7张）
var i = 0; //初始化为第0张图片
timer = null; //定时器
//自动轮播
timer = setInterval(function () {
i++;
innerBox.stop(false, true).animate({'left':-i*imgW+'px'},300)
dot.find('li').removeClass('active').eq(i-1).addClass('active')
if(i > imgCount){
innerBox.animate({'left':-1*imgW+'px'},0);
dot.find('li').removeClass('active').eq(0).addClass('active')
i = 1;
}
},interval)
//点击右侧箭头，播放下一张
arrowR.click(function () {
i++;
innerBox.stop(false, true).animate({'left':-i*imgW+'px'},300)
dot.find('li').removeClass('active').eq(i-1).addClass('active')
if(i > imgCount){
innerBox.animate({'left':-1*imgW+'px'},0);
dot.find('li').removeClass('active').eq(0).addClass('active')
i = 1;
}
})
//点击左侧箭头，播放上一张
arrowL.click(function () {
i--;
innerBox.stop(false, true).animate({'left':-i*imgW+'px'},300)
dot.find('li').removeClass('active').eq(i-1).addClass('active')
if(i < 1){
innerBox.animate({'left':-imgCount*imgW+'px'},0);
dot.find('li').removeClass('active').eq(imgCount-1).addClass('active')
i = imgCount;
}
})
//鼠标经过轮播图区域时，清除定时器，停止自动轮播
slideBox.mouseenter(function () {
clearInterval(timer);
})
//鼠标离开轮播图区域时，重新启动自动轮播
slideBox.mouseleave(function () {
timer = setInterval(function () {
i++;
innerBox.stop(false, true).animate({'left':-i*imgW+'px'},300)
dot.find('li').removeClass('active').eq(i-1).addClass('active')
if(i > imgCount){
innerBox.animate({'left':-1*imgW+'px'},0);
dot.find('li').removeClass('active').eq(0).addClass('active')
i = 1;
}
},interval)
})
4. Affichage du rendu
Formulaire d'opération dynamique js
Utilisez le nom pour obtenir la valeur de sélection
Utilisation du package de téléchargement multi-fichiers de l'applet WeChat
Comment utiliser le prototype d'objet Object en JS
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!
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript