오늘은 캐러셀 사진에 대해 이야기하고 있는데, 오늘은 jquery 캐러셀 사진에 대해 이야기하고 있습니다!
먼저 플러그인이 있어야 합니다.
Zepto 플러그인은 무시하세요. 아무 역할도 하지 않습니다.
그렇습니다!
그럼 코드입니다!
<!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>그렇습니다, 배웠나요??
위 내용은 jquery 회전식 차트의 예제 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!