Cet article présente principalement en détail l'effet de défilement transparent de l'image du carrousel js, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer
Si vous souhaitez connaître le début et la fin de l'image du carrousel quand. faire S'ils ne peuvent pas être connectés, l'effet sera un peu moche. Voici une méthode que j'utilise couramment :
Laissez-moi d'abord l'expliquer avec des mots :
Si vous souhaitez en afficher 5. images, ils sont 1, 2 et 3. ,4,5 Ensuite l'introduction du code est comme ceci : 1,2,3,4,5,1
Je ne dirai pas grand chose sur le rotation séquentielle ici, le focus est de 5>1 et le carrousel de 1>5
i représente l'index de l'image actuelle
pre représente le bouton de l'image précédente
next représente le bouton de l'image suivante
ul représente la liste d'images
(1) 5>1>2... Quand le bouton "suivant" passe de 5 à 1, il tourne normalement dans l'ordre, et lorsque l'image actuelle est le deuxième "1", l'image suivante doit être "2", puis lorsque "next", la valeur gauche de ul est 0, i==1;
(2) 1>5>4.... Lorsque Lorsque le bouton "pre" passe de l'image actuelle "1" (le premier 1) à l'image 5, i==4, la valeur gauche de ul devient -5 fois la largeur de l'img, c'est-à-dire que le premier 1 devient tranquillement le dernier 1
est un peu déroutant à exprimer dans le langage. Voici le code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding: 0;margin: 0;}
.container{
width: 273px;height: 163px;overflow: hidden;
position: relative;margin: 0 auto;
}
.list{
position: absolute;width: 1638px;top: 0;left: 0px;
}
.list li{
float: left;list-style: none;
}
.btn{
position: absolute;display: block;width: 40px;height: 50px;font-size: 40px;
text-align: center;font-weight: bold;top: 50%;margin-top: -25px;background-color: rgba(255,255,255,0.5);cursor:pointer;
}
.btn:hover{
background-color: rgba(0,0,0,0.3);color: #fff;
}
.pre{
left: 0;
}
.next{
right: 0;
}
.nav{
position: absolute;bottom: 5px;display: flex;justify-content: center;width: 100%;
}
.nav span{
width: 10px;height: 10px;border-radius: 10px;background-color: #fff;z-index: 2;display: inline-block;margin-right: 10px;cursor: pointer;
}
span.on{
background-color: orange;
}
</style>
</head>
<body>
<p class="container">
<ul class="list" style="left: 0px">
<li><img src="./images/1.png" alt=""></li>
<li><img src="./images/2.png" alt=""></li>
<li><img src="./images/3.png" alt=""></li>
<li><img src="./images/4.png" alt=""></li>
<li><img src="./images/5.png" alt=""></li>
<li><img src="./images/1.png" alt=""></li>
</ul>
<p class="nav">
<span class="on"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</p>
<em class="next btn">></em>
<em class="pre btn"><</em>
</p>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(function(){
var i=0;
$('.next').click(function(){
i++;
console.log(i);
moveImg(i);
});
$('.pre').click(function(){
i--;
moveImg(i);
});
$('.nav span').click(function(){
var _index=$(this).index();
i=_index;
moveImg(i);
});
// i的作用：决定下一张图片是谁————也就是说ul的left是多少。
// $('.list').css({left)的值是从图a过度是此时的ul的left。
function moveImg(){
if (i==6) {
i=1;
$('.list').css({'left':'0'});
}
// 是第一张
if(i==-1){
i=4;
$('ul').css({left:(5*-273)});
}
$('.list').stop().animate({'left':-273*i+'px'},1000);
if (i==5) {
$('.nav span').eq(0).addClass('on').siblings().removeClass('on');
}
$('.nav span').eq(i).addClass('on').siblings().removeClass('on');
}
})
</script>
</body>
</html>Ce qui précède est. tout le contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. J'espère également que tout le monde Duoduo soutiendra Script House.
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)
