Maison >interface Web >js tutoriel >Partagez l'exemple de code du graphique carrousel jquery
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!