Le contenu de cet article est de présenter la méthode de réalisation du graphique carrousel Touch sur le terminal mobile avec js. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Touchez le carrousel
touchLe carrousel consiste en fait à basculer le carrousel vers la gauche et la droite en faisant glisser votre doigt. Ci-dessous, nous utiliserons un cas pour le mettre en œuvre.
1. Structure HTML
En termes de structure, ul et li sont toujours utilisés pour stocker les images du carrousel, et ol et li sont utilisés pour stocker les points du carrousel. :
 "Comment implémenter le carrousel Touch sur un terminal mobile en js ? (exemple de code)")
2. Initialisation du style Certaines balises de
html auront des styles par défaut. Par exemple, la balise body a une marge de. par défaut Afin de ne pas affecter l’apparence, nous devons le supprimer.
/* 清除标签默认边距 */
body,ul,li,ol,img {
margin: 0;
padding: 0;
}
/* 清除 ul 等标签前面的“小圆点” */
ul,li,ol {
list-style-type: none;
}
/* 图片自适应 */
img {
width: 100%;
height: auto;
border: none;
/* ie8 */
display: block;
-ms-interpolation-mode: bicubic; /*为了照顾ie图片缩放失真*/
}Copier après la connexion
 "Comment implémenter le carrousel Touch sur un terminal mobile en js ? (exemple de code)")
3. Ajouter du style
En parlant d'effets spéciaux plus tôt, nous avons expliqué comment utiliser le js natif pour déplacer une image de carrousel. concept, mais la méthode à l'époque était le li flottant. Ici, j'aimerais vous présenter une nouvelle méthode : le positionnement.
Idée :
Donnez à la ul boîte extérieure un positionnement relatif
Le La hauteur ul ici ne peut pas être codée en dur. Ce devrait être la hauteur qui li est étirée. Cependant, en raison du positionnement absolu de li, il n'y a aucun moyen d'étendre cette hauteur, donc le ul ici. doit être défini dynamiquement dans js Height
définit le positionnement relatif pour li, et left et top sont 0, puis ajoute un li attribut à transform:translateX(300%) dans le but L'image affichée initiale est vide, puis dans js il vous suffit de définir dynamiquement la valeur li de chaque translateX pour obtenir un carrousel
définissez la zone des petits points, car le nombre de petits points est inconnu, la largeur de ol est également inconnue. Si vous souhaitez centrer horizontalement une boîte de largeur inconnue, vous pouvez utiliser absolute. positionnement combiné avec left pourcentage ;
Définissez une largeur et une hauteur pour le ol ci-dessous li, ajoutez un attribut de bordure arrondie et faites-le flotter vers la gauche, de sorte que une rangée de points creux peut être affichée ;
Enfin, ajoutez une classe de style et définissez-y un attribut d'arrière-plan pour afficher les petits points correspondant à l'image actuellement affichée.
/* 轮播图最外层盒子 */
.carousel {
position: relative;
overflow: hidden;
}
.carousel ul {
/* 这个高度需要在JS里面动态添加 */
}
.carousel ul li {
position: absolute;
width: 100%;
left: 0;
top: 0;
/* 使用 transform:translaX(300%) 暂时将 li 移动到屏幕外面去*/
-webkit-transform: translateX(300%);
transform: translateX(300%);
}
/* 小圆点盒子 */
.carousel .points {
/* 未知宽度的盒子，使用 absolute 定位，结合 transform 的方式进行居中 */
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50%);
}
/* 小圆点 */
.carousel .points li {
width: 5px;
height: 5px;
border-radius: 50%;
border: 1px solid #fff;
float: left;
margin: 0 2px;
}
/* 选中小圆点的样式类 */
.carousel .points li.active {
background-color: #fff;
}Copier après la connexion
 "Comment implémenter le carrousel Touch sur un terminal mobile en js ? (exemple de code)")
4. préparation js
Ne considérez rien d'autre en premier js Lors de l'initialisation, d'abord Tous. il vous suffit d'ajouter une hauteur à ul, sinon l'image ne sera pas affichée.
Réglez dynamiquement la hauteur de UL
Générez dynamiquement de petits points (créez le nombre de petits points en fonction du nombre d'images, i=0 Ajouter active)
Initialiser les trois positions de base de li
pour définir respectivement trois variables Pour stocker les indices de trois li (left stocke l'indice de la dernière image, center et right stockent respectivement les indices de la première et de la deuxième image)
Utilisez 数组[下标] pour définir la position des trois li dans la direction left après le positionnement
var carousel = document.querySelector('.carousel');
var carouselUl = carousel.querySelector('ul');
var carouselLis = carouselUl.querySelectorAll('li');
var points = carousel.querySelector('ol');
// 屏幕的宽度（轮播图显示区域的宽度）
var screenWidth = document.documentElement.offsetWidth;
// 1- ul设置高度
carouselUl.style.height = carouselLis[0].offsetHeight + 'px';
// 2- 生成小圆点
for(var i = 0; i <p style="text-align: center;"><img src="https://img.php.cn//upload/image/588/479/428/Comment%20impl%C3%A9menter%20le%20carrousel%20Touch%20sur%20un%20terminal%20mobile%20en%20js%20?%20(exemple%20de%20code)" title="Comment implémenter le carrousel Touch sur un terminal mobile en js ? (exemple de code)" alt="Comment implémenter le carrousel Touch sur un terminal mobile en js ? (exemple de code)" style="max-width:90%" style="max-width:90%"></p><p> <strong>Rendu : </strong></p><p style="text-align: center;"><img src="https://img.php.cn//upload/image/609/739/253/Comment%20impl%C3%A9menter%20le%20carrousel%20Touch%20sur%20un%20terminal%20mobile%20en%20js%20?%20(exemple%20de%20code)" title="Comment implémenter le carrousel Touch sur un terminal mobile en js ? (exemple de code)" alt="Comment implémenter le carrousel Touch sur un terminal mobile en js ? (exemple de code)" style="max-width:90%" style="max-width:90%"></p><h3>5. Ajoutez une minuterie pour faire bouger les images </h3><blockquote>Les images du carrousel tourneront d'elles-mêmes. Vous en avez donc besoin. utiliser une minuterie pour exécuter la fonction de rotation de temps en temps. </blockquote>Copier après la connexion
Ajouter une minuterie, faire pivoter les indices dans la minuterie
Jugement de valeur extrême
paramètres Transition (le substitut n'a pas besoin de transition)
Retour
Lien de mise au point à petits points
var timer = null;
// 调用定时器
timer = setInterval(showNext, 2000);
// 轮播图片切换
function showNext(){
// 轮转下标
left = center;
center = right;
right++;
// 极值判断
if(right > carouselLis.length - 1){
right = 0;
}
//添加过渡
carouselLis[left].style.transition = 'transform 1s';
carouselLis[center].style.transition = 'transform 1s';
// 右边的图片永远是替补的，不能添加过渡
carouselLis[right].style.transition = 'none';
// 归位
carouselLis[left].style.transform = 'translateX('+ (-screenWidth) +'px)';
carouselLis[center].style.transform = 'translateX(0px)';
carouselLis[right].style.transform = 'translateX('+ screenWidth +'px)';
// 自动设置小圆点
setPoint();
}
// 动态设置小圆点的active类
var pointsLis = points.querySelectorAll('li');
function setPoint(){
for(var i = 0; i <p style="text-align: center;"><img src="https://img.php.cn//upload/image/903/520/594/Comment%20impl%C3%A9menter%20le%20carrousel%20Touch%20sur%20un%20terminal%20mobile%20en%20js%20?%20(exemple%20de%20code)" title="Comment implémenter le carrousel Touch sur un terminal mobile en js ? (exemple de code)" alt="Comment implémenter le carrousel Touch sur un terminal mobile en js ? (exemple de code)" style="max-width:90%" style="max-width:90%"></p><p><strong>Rendu : </strong></p><p style="text-align: center;"><img src="https://img.php.cn//upload/image/742/369/156/Comment%20impl%C3%A9menter%20le%20carrousel%20Touch%20sur%20un%20terminal%20mobile%20en%20js%20?%20(exemple%20de%20code)" title="Comment implémenter le carrousel Touch sur un terminal mobile en js ? (exemple de code)" alt="Comment implémenter le carrousel Touch sur un terminal mobile en js ? (exemple de code)" style="max-width:90%" style="max-width:90%"></p><h3>6. touch 滑动</h3><blockquote>移动端的轮播图，配合<code>touch</code>滑动事件，效果更加友好。</blockquote>Copier après la connexion
var carousel = document.querySelector('.carousel');
var carouselUl = carousel.querySelector('ul');
var carouselLis = carouselUl.querySelectorAll('li');
var points = carousel.querySelector('ol');
// 屏幕的宽度
var screenWidth = document.documentElement.offsetWidth;
var timer = null;
// 设置 ul 的高度
carouselUl.style.height = carouselLis[0].offsetHeight + 'px';
// 动态生成小圆点
for (var i = 0; i carouselLis.length - 1) {
right = 0;
}
//添加过渡（多次使用，封装成函数）
setTransition(1, 1, 0);
// 归位
setTransform();
// 自动设置小圆点
setPoint();
}
// 轮播图片切换上一张
function showPrev() {
// 轮转下标
right = center;
center = left;
left--;
// 极值判断
if (left screenWidth / 3 || (dTime 30)) {
// 滑动成功了
// 判断用户是往哪个方向滑
if (dx > 0) {
// 往右滑 看到上一张
showPrev();
} else {
// 往左滑 看到下一张
showNext();
}
} else {
// 添加上过渡
setTransition(1, 1, 1);
// 滑动失败了
setTransform();
}
// 重新启动定时器
clearInterval(timer);
// 调用定时器
timer = setInterval(showNext, 2000);
}
// 设置过渡
function setTransition(a, b, c) {
if (a) {
carouselLis[left].style.transition = 'transform 1s';
} else {
carouselLis[left].style.transition = 'none';
}
if (b) {
carouselLis[center].style.transition = 'transform 1s';
} else {
carouselLis[center].style.transition = 'none';
}
if (c) {
carouselLis[right].style.transition = 'transform 1s';
} else {
carouselLis[right].style.transition = 'none';
}
}
// 封装归位
function setTransform(dx) {
dx = dx || 0;
carouselLis[left].style.transform = 'translateX(' + (-screenWidth + dx) + 'px)';
carouselLis[center].style.transform = 'translateX(' + dx + 'px)';
carouselLis[right].style.transform = 'translateX(' + (screenWidth + dx) + 'px)';
}
// 动态设置小圆点的active类
var pointsLis = points.querySelectorAll('li');
function setPoint() {
for (var i = 0; i <p style="text-align: center;"><img src="https://img.php.cn//upload/image/632/309/128/Comment%20impl%C3%A9menter%20le%20carrousel%20Touch%20sur%20un%20terminal%20mobile%20en%20js%20?%20(exemple%20de%20code)" title="Comment implémenter le carrousel Touch sur un terminal mobile en js ? (exemple de code)" alt="Comment implémenter le carrousel Touch sur un terminal mobile en js ? (exemple de code)" style="max-width:90%" style="max-width:90%"></p><p><strong>效果图：</strong></p><p style="text-align: center;"><img src="https://img.php.cn//upload/image/837/946/969/Comment%20impl%C3%A9menter%20le%20carrousel%20Touch%20sur%20un%20terminal%20mobile%20en%20js%20?%20(exemple%20de%20code)" title="Comment implémenter le carrousel Touch sur un terminal mobile en js ? (exemple de code)" alt="Comment implémenter le carrousel Touch sur un terminal mobile en js ? (exemple de code)" style="max-width:90%" style="max-width:90%"></p><p>以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。更多精彩内容大家可以关注php中文网相关教程栏目！！！</p>Copier après la connexion
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
