recherche

Maison >interface Web >js tutoriel >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中世界最好的语言
php中世界最好的语言original
2018-03-23 10:46:182259parcourir

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({&#39;left&#39;:-imgCount*imgW+&#39;px&#39;},0);
  dot.find(&#39;li&#39;).removeClass(&#39;active&#39;).eq(imgCount-1).addClass(&#39;active&#39;)
  i = imgCount;
 }
})
//鼠标经过轮播图区域时，清除定时器，停止自动轮播
slideBox.mouseenter(function () {
 clearInterval(timer);
})
//鼠标离开轮播图区域时，重新启动自动轮播
slideBox.mouseleave(function () {
 timer = setInterval(function () {
  i++;
  innerBox.stop(false, true).animate({&#39;left&#39;:-i*imgW+&#39;px&#39;},300)
  dot.find(&#39;li&#39;).removeClass(&#39;active&#39;).eq(i-1).addClass(&#39;active&#39;)
  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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

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!

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：Explication graphique détaillée de l'utilisation de slot-scope dans vueArticle suivant：Explication graphique détaillée de l'utilisation de slot-scope dans vue

Articles Liés

Voir plus