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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | <!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= "/static/imghw/default1.png" data-src= "http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=b4251f00ef925cba01ed49ca117e14a7" class = "lazy" alt= "" /></li>
<li><img src= "/static/imghw/default1.png" data-src= "http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=d38403825519770211acbf49459ae7d7" class = "lazy" alt= "" /></li>
<li><img src= "/static/imghw/default1.png" data-src= "http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=53c83d39c62af65db998f4945bacaec2" class = "lazy" alt= "" /></li>
<li><img src= "/static/imghw/default1.png" data-src= "http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=5509f1a642644b40c8aa98c9e2c77a83" class = "lazy" 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>
|
Copier après la connexion
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 !