Maison > Article > interface Web > Partagez l'exemple de code du graphique carrousel jquery
Partagez l'exemple de code du graphique carrousel jquery
- 零下一度original
- 2017-06-27 10:52:411477parcourir
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!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn