jquery輪播圖
阿新 • • 發佈：2017-06-26
padding 樣式 .cn ima html 引入 cnblogs ive 單獨
咱們今天還是輪播圖,今天說jquery的輪播圖!
首先,要有個插件:
請無視Zepto插件,他沒起到任何作用!
就是這兩個啦!
然後就是代碼!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--引入插件-->
<script src="../上月插件/jquery-3.1.1.min.js"></script>
<script src="../課件/課件/zepto.js"></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輪播圖