Comment implémenter des images de carrousel coulissant en js ?
Cet article présente principalement en détail l'implémentation js de l'effet carrousel coulissant de gauche à droite. Il a une certaine valeur de référence. Les amis intéressés peuvent se référer à
L'effet carrousel est Laissez les images glisser automatiquement. toutes les quelques secondes pour obtenir l'effet d'images jouées à tour de rôle. En termes d'effets, les carrousels peuvent être glissants ou progressifs. Le carrousel coulissant est l'effet d'images glissant de gauche à droite. Le carrousel progressif est l'effet d'affichage progressif d'images en fonction de la transparence. la méthode pour obtenir le premier effet.
Principe
Les images de même taille sont combinées dans une colonne, mais une seule des images est affichée et les autres sont masquées. affichage en modifiant l’image de valeur de gauche.
Cliquez pour voir l'effet
partie html
la navigation est le total conteneur, la première One ul list #index est une liste de petits points. Quel que soit le point sur lequel la souris affichera l'image, c'est une classe qui ajoute un attribut de couleur d'arrière-plan aux petits points. une liste de photos.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Carousel Figure</title>
<link rel="stylesheet" href="style.css" rel="external nofollow" >
</head>
<body>
<!--从左向右滑动-->
<nav>
<ul id="index">
<li class="on"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul id="img">
<li><img src="../images/img1.jpg" alt="img1"></li>
<li><img src="../images/img2.jpg" alt="img2"></li>
<li><img src="../images/img3.jpg" alt="img3"></li>
<li><img src="../images/img4.jpg" alt="img4"></li>
<li><img src="../images/img5.jpg" alt="img5"></li>
</ul>
</nav>
<script src="script.js"></script>
</body>
</html>partie CSS
Les tailles d'image sont toutes de 720*405. Ici, vous devez faire attention. aux points suivants :
la liste ul#img est absolument positionnée par rapport à nav. La longueur de #img doit être réglée sur la largeur totale de toutes les images pour que les images puissent être affichées. côte à côte ;
La largeur de navigation totale du conteneur doit être définie sur la largeur de l'image 720px, c'est-à-dire qu'une seule image peut être affichée et la partie au-delà de la largeur est masquée, c'est-à-dire overflow: Hidden;
La liste des petits points doit être affichée au-dessus de la liste d'images, définissez donc le z-index de #img : -1
La liste des petits points est composée d'un série de li en changeant le style de bordure, il vous suffit donc de changer la couleur d'arrière-plan pour obtenir l'effet de déplacer les petits points.
*{
margin:0;
padding:0;
}
nav{
width: 720px;
height: 405px;
margin:20px auto;
overflow: hidden;
position: relative;
}
#index{
position: absolute;
left:320px;
bottom: 20px;
}
#index li{
width:8px;
height: 8px;
border: solid 1px gray;
border-radius: 100%;
background-color: #eee;
display: inline-block;
}
#img{
width: 3600px;/*不给宽高无法移动*/
height: 405px;
position: absolute;/*不定义absolute，js无法设置left和top*/
z-index: -1;
}
#img li{
width: 720px;
height: 405px;
float: left;
}
#index .on{
background-color: black;
}Partie JS
Fonction de déplacement d'image moveElement()
La fonction moveElement doit obtenir la position actuelle et la position cible de l'image et calculer l'écart entre elles pour le mouvement. Vous pouvez utiliser offsetLeft et offsetTop pour obtenir la position actuelle de l'image. . L'effet de "faire glisser" l'image lors d'un déplacement est de diviser la distance en 10 fois pour le mouvement, c'est-à-dire en utilisant la fonction setTimeOut. Cependant, afin d'empêcher la souris de survoler, la fonction clearTimeout() doit être appelée. . Le code est le suivant :
function moveElement(ele,x_final,y_final,interval){//ele为元素对象
var x_pos=ele.offsetLeft;
var y_pos=ele.offsetTop;
var dist=0;
if(ele.movement){//防止悬停
clearTimeout(ele.movement);
}
if(x_pos==x_final&&y_pos==y_final){//先判断是否需要移动
return;
}
dist=Math.ceil(Math.abs(x_final-x_pos)/10);//分10次移动完成
x_pos = x_pos<x_final ? x_pos+dist : x_pos-dist;
dist=Math.ceil(Math.abs(y_final-y_pos)/10);//分10次移动完成
y_pos = y_pos<y_final ? y_pos+dist : y_pos-dist;
ele.style.left=x_pos+'px';
ele.style.top=y_pos+'px';
ele.movement=setTimeout(function(){//分10次移动，自调用10次
moveElement(ele,x_final,y_final,interval);
},interval)
}Fonction de déplacement de petits points moveIndex()
L'essence du déplacement du point est de déplacer le jeu de couleurs d'arrière-plan. Le principe de la classe est de déterminer d'abord quel li a une couleur d'arrière-plan, de le supprimer s'il y en a une, de sorte que tous les li n'aient pas d'arrière-plan, puis d'ajouter un arrière-plan du li actuel.
function moveIndex(list,num){//移动小圆点
for(var i=0;i<list.length;i++){
if(list[i].className=='on'){//清除li的背景样式
list[i].className='';
}
}
list[num].className='on';
}Carrousel automatique d'images
Écrivez le code suivant directement dans le fenêtre .onload.
Ici, vous devez définir un index variable, ce qui signifie passer à l'image d'index (0 ~ n-1, n est le nombre de li).
var img=document.getElementById('img');
var list=document.getElementById('index').getElementsByTagName('li');
var index=0;//这里定义index是变量，不是属性
var nextMove=function(){//一直向右移动，最后一个之后返回
index+=1;
if(index>=list.length){
index=0;
}
moveIndex(list,index);
moveElement(img,-720*index,0,20);
};La fonction setInterval() est requise pour faire pivoter automatiquement les images, permettant au programme d'appeler automatiquement la fonction nextMove() toutes les quelques secondes :
var play=function(){
timer=setInterval(function(){
nextMove();
},2500);
};La souris recouvre l'effet petit point
Pour réaliser quel petit point la souris recouvre, il suffit de montrer Pour produire l'effet de l'image correspondante, vous devez savoir quel petit point est couvert par la souris. Ici, un index d'attribut personnalisé est ajouté à chaque li afin que la valeur de cet attribut soit le numéro de série du petit correspondant. point i (0~ n-1, n est le nombre de li), de sorte que chaque fois que la souris le couvre, il vous suffit d'obtenir la valeur de l'attribut index pour savoir quel petit point la souris couvre. Notez que l'attribut index n'a rien à voir avec la variable index, ils ont seulement le même nom.
for(var i=0;i<list.length;i++){//鼠标覆盖上哪个小圆圈，图片就移动到哪个小圆圈，并停止
list[i].index=i;//这里是设置index属性，和index变量没有任何联系
list[i].onmouseover= function () {
var clickIndex=parseInt(this.index);
moveElement(img,-720*clickIndex,0,20);
index=clickIndex;
moveIndex(list,index);
clearInterval(timer);
};
list[i].onmouseout= function () {//移开后继续轮播
play();
};
}Résumé
Il est séparé du comportement de mouvement des petits points, il est donc plus facile de mettre en œuvre. Cette image de carrousel présente en fait quelques problèmes. Lors du glissement de la dernière image à la première image, la distance de glissement est longue. En fait, il est facile de changer la méthode de glissement. Ici, le calcul final est basé sur -720*. index. La valeur de gauche, et l'index consiste à lier le mouvement de l'image et le mouvement des petits points ensemble. Changez la méthode de glissement en offsetLeft+ actuel (-720). valeur, puis ajoutez une valeur au fichier html. Images :
<li><img src="../images/img1.jpg" alt="img1"></li> <li><img src="../images/img2.jpg" alt="img2"></li> <li><img src="../images/img3.jpg" alt="img3"></li> <li><img src="../images/img4.jpg" alt="img4"></li> <li><img src="../images/img5.jpg" alt="img5"></li> <li><img src="../images/img1.jpg" alt="img1"></li>
Ensuite, en glissant vers la dernière image, attribuez rapidement le décalage à 0 et modifiez-le en. la première image. Les deux images sont les mêmes, les changements ne peuvent pas être distingués et une connexion transparente peut être obtenue.
if(x_pos==-3600){
ele.style.left='0';
ele.style.top='0';
}else{
ele.style.left=x_pos+'px';
ele.style.top=y_pos+'px';
}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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment mettre en œuvre la double connexion WeChat sur les téléphones mobiles Huawei ?
Mar 24, 2024 am 11:27 AM
Comment mettre en œuvre la double connexion WeChat sur les téléphones mobiles Huawei ? Avec l’essor des réseaux sociaux, WeChat est devenu l’un des outils de communication indispensables dans la vie quotidienne des gens. Cependant, de nombreuses personnes peuvent rencontrer un problème : se connecter à plusieurs comptes WeChat en même temps sur le même téléphone mobile. Pour les utilisateurs de téléphones mobiles Huawei, il n'est pas difficile d'obtenir une double connexion WeChat. Cet article explique comment obtenir une double connexion WeChat sur les téléphones mobiles Huawei. Tout d'abord, le système EMUI fourni avec les téléphones mobiles Huawei offre une fonction très pratique : l'ouverture d'une double application. Grâce à la fonction de double ouverture de l'application, les utilisateurs peuvent simultanément
Guide de programmation PHP : méthodes pour implémenter la séquence de Fibonacci
Mar 20, 2024 pm 04:54 PM
Le langage de programmation PHP est un outil puissant pour le développement Web, capable de prendre en charge une variété de logiques et d'algorithmes de programmation différents. Parmi eux, l’implémentation de la séquence de Fibonacci est un problème de programmation courant et classique. Dans cet article, nous présenterons comment utiliser le langage de programmation PHP pour implémenter la séquence de Fibonacci et joindrons des exemples de code spécifiques. La suite de Fibonacci est une suite mathématique définie comme suit : le premier et le deuxième élément de la suite valent 1, et à partir du troisième élément, la valeur de chaque élément est égale à la somme des deux éléments précédents. Les premiers éléments de la séquence
Comment implémenter la fonction de clonage WeChat sur les téléphones mobiles Huawei
Mar 24, 2024 pm 06:03 PM
Comment mettre en œuvre la fonction de clonage WeChat sur les téléphones mobiles Huawei Avec la popularité des logiciels sociaux et l'importance croissante accordée à la confidentialité et à la sécurité, la fonction de clonage WeChat est progressivement devenue le centre d'attention. La fonction de clonage WeChat peut aider les utilisateurs à se connecter simultanément à plusieurs comptes WeChat sur le même téléphone mobile, ce qui facilite la gestion et l'utilisation. Il n'est pas difficile de mettre en œuvre la fonction de clonage WeChat sur les téléphones mobiles Huawei. Il vous suffit de suivre les étapes suivantes. Étape 1 : Assurez-vous que la version du système de téléphonie mobile et la version de WeChat répondent aux exigences. Tout d'abord, assurez-vous que la version de votre système de téléphonie mobile Huawei a été mise à jour vers la dernière version, ainsi que l'application WeChat.
Comment mettre en œuvre une opération de division exacte dans Golang
Feb 20, 2024 pm 10:51 PM
La mise en œuvre d'opérations de division exactes dans Golang est un besoin courant, en particulier dans les scénarios impliquant des calculs financiers ou d'autres scénarios nécessitant des calculs de haute précision. L'opérateur de division intégré "/" de Golang est calculé pour les nombres à virgule flottante, et il y a parfois un problème de perte de précision. Afin de résoudre ce problème, nous pouvons utiliser des bibliothèques tierces ou des fonctions personnalisées pour implémenter des opérations de division exactes. Une approche courante consiste à utiliser le type Rat du package math/big, qui fournit une représentation des fractions et peut être utilisé pour implémenter des opérations de division exactes.
Découvrez comment Golang offre des possibilités de développement de jeux
Mar 16, 2024 pm 12:57 PM
Dans le domaine actuel du développement logiciel, Golang (langage Go), en tant que langage de programmation efficace, concis et hautement simultané, est de plus en plus favorisé par les développeurs. Sa riche bibliothèque de normes et ses fonctionnalités de concurrence efficaces en font un choix de premier plan dans le domaine du développement de jeux. Cet article explorera comment utiliser Golang pour le développement de jeux et démontrera ses puissantes possibilités à travers des exemples de code spécifiques. 1. Avantages de Golang dans le développement de jeux. En tant que langage typé statiquement, Golang est utilisé dans la construction de systèmes de jeux à grande échelle.
Guide de mise en œuvre des exigences du jeu PHP
Mar 11, 2024 am 08:45 AM
Guide d'implémentation des exigences du jeu PHP Avec la popularité et le développement d'Internet, le marché des jeux Web devient de plus en plus populaire. De nombreux développeurs espèrent utiliser le langage PHP pour développer leurs propres jeux Web, et la mise en œuvre des exigences du jeu constitue une étape clé. Cet article explique comment utiliser le langage PHP pour implémenter les exigences courantes du jeu et fournit des exemples de code spécifiques. 1. Créer des personnages de jeu Dans les jeux Web, les personnages de jeu sont un élément très important. Nous devons définir les attributs du personnage du jeu, tels que le nom, le niveau, la valeur de l'expérience, etc., et fournir des méthodes pour les exploiter.
Comment distinguer les vraies et fausses boîtes à chaussures de chaussures Nike (maîtrisez une astuce pour les identifier facilement)
Sep 02, 2024 pm 04:11 PM
En tant que marque de sport de renommée mondiale, les chaussures Nike ont attiré beaucoup d'attention. Cependant, il existe également un grand nombre de produits contrefaits sur le marché, notamment de fausses boîtes à chaussures Nike. Distinguer les véritables boîtes à chaussures des fausses est crucial pour protéger les droits et les intérêts des consommateurs. Cet article vous fournira quelques méthodes simples et efficaces pour vous aider à faire la distinction entre les vraies et les fausses boîtes à chaussures. 1 : Titre de l'emballage extérieur En observant l'emballage extérieur des boîtes à chaussures Nike, vous pouvez découvrir de nombreuses différences subtiles. Les véritables boîtes à chaussures Nike contiennent généralement des matériaux en papier de haute qualité, doux au toucher et sans odeur âcre évidente. Les polices et les logos des boîtes à chaussures authentiques sont généralement clairs et détaillés, et il n'y a pas de flou ni d'incohérence de couleur. 2 : titre de marquage à chaud du logo. Le logo sur les boîtes à chaussures Nike est généralement imprimé à chaud. La partie de marquage à chaud sur la boîte à chaussures authentique s'affichera.
Comment afficher et modifier des fichiers SQL
Feb 26, 2024 pm 05:12 PM
Un fichier SQL est un fichier texte qui contient généralement une série d'instructions SQL. Pour ouvrir un fichier SQL, vous pouvez utiliser un éditeur de texte ou un outil de développement SQL spécialisé. Le moyen le plus simple d'ouvrir un fichier SQL consiste à utiliser un éditeur de texte, tel que Notepad ou Notepad++ sous Windows, ou Text Editor sous Mac. Voici les étapes pour ouvrir un fichier SQL : Tout d'abord, recherchez le fichier SQL que vous souhaitez ouvrir, cliquez avec le bouton droit sur le fichier et sélectionnez « Ouvrir avec ». dans la fenêtre pop-up
