Nous sommes encore des images de carrousel aujourd'hui, et aujourd'hui nous parlons d'images de carrousel jquery !
Tout d'abord, vous avez besoin d'un plug-in :
Veuillez ignorer le plug-in Zepto , il ne joue aucun rôle !
Ça y est !
Ensuite il y a le code !
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--引入插件-->
<script src="../上月插件/jquery-3.1.1.min.js?1.1.11"></script>
<script src="../课件/课件/zepto.js?1.1.11"></script>
<!--CSS样式-->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
width: 400px;
height: 230px;
}
ul{
/*计算全部图片的宽度*/
width:1600px;
height: 230px;
list-style: none;
/*定位*/
position: absolute;
}
div{
width: 400px;
height: 230px;
overflow: hidden;
/*定位*/
position: relative;
}
li{
/*单独图片宽度*/
width:400px;
float: left;
}
</style>
</head>
<body>
<div>
<ul>
<!--图片-->
<li><img src="../img/2d.jpg"/></li>
<li><img src="../img/2d.jpg"/></li>
<li><img src="../img/2d.jpg"/></li>
<li><img src="../img/2d.jpg"/></li>
</ul>
</div>
<script type="text/javascript">
var x = 0,TimerId;
function strTimer(){
TimerId = setInterval(function(){
//判断,如果是第三张图片的时候,那么就变成第一张图片,实现循环的效果
if(x == -1200){
x = 0;
$("ul :first").css("left",0 + "px");
}
if(x % 400 == 0){
stop(1);
}
$("ul:first").css("left",x-- + "px");
},10);
}
function stop(n){
if(n == 1){
clearInterval(TimerId);
setTimeout(strTimer,500);
}else{
clearInterval(TimerId);
}
}
strTimer();
(zepot);
</script>
</body>
</html>Ça y est, tu apprends. C'est déjà fait ??
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!
Que sont les plug-ins jquery ?
Comment faire fonctionner json avec jquery
Comment supprimer des éléments dans jquery
Utilisation de la méthode jQuery hover()
jquery implémente la méthode de pagination
Qu'est-ce qu'un élément caché dans jquery
Qu'est-ce qui est mis en évidence dans jquery
Comment utiliser la fonction plot en Python
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
