Cet article partage principalement l'exemple de code pour réaliser l'effet de sélection à l'aide de JS natif. Il a une très bonne valeur de référence, jetons un oeil avec l'éditeur ci-dessous
L'effet est le suivant : (Vous pouvez copier le code pour voir l'effet dynamique, et vous pouvez choisir d'ajouter le photos dans l'étui)
Le code est le suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
list-style: none;
}
p{
position: relative;
width: 800px;
height: 200px;
border: 5px solid lightgreen;
margin:10px auto;
overflow: hidden;
}
p ul{
position: absolute;
left:0;
top:0;
}
p ul li{
width: 200px;
height: 200px;
float: left;
}
p ul li img{
width:100%;
height: 100%;
}
</style>
</head>
<body>
<p id="p1">
<ul>
<li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=b4251f00ef925cba01ed49ca117e14a7" alt=""/></li>
<li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=d38403825519770211acbf49459ae7d7" alt=""/></li>
<li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=53c83d39c62af65db998f4945bacaec2" alt=""/></li>
<li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=5509f1a642644b40c8aa98c9e2c77a83" alt=""/></li>
</ul>
</p>
<script>
var oUl=document.getElementsByTagName('ul')[0];
var lis=oUl.getElementsByTagName('li');
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=lis.length*lis[0].offsetWidth+'px';
var left=null;
var timer=setInterval(function(){
left-=3;
if(left<-oUl.offsetWidth/2){
left=0;
}
oUl.style.left=left+'px'
},10)
</script>
</body>
</html>Pour plus d'articles liés à l'implémentation de l'effet de sélection en JS natif, veuillez faire attention au site Web PHP chinois !
Savez-vous si vous annulez l'autre personne immédiatement après l'avoir suivie sur Douyin ?
cmccedu
Comment utiliser le post-message
Comment télécharger le fichier FLV
Comment utiliser HTML pour la navigation Web
Utilisation des éléments en python
utilisation de la fonction memcpy
Recommandation du logiciel de programmation PHP
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
