標籤：flow over asc else 圖片 utf-8 image 分享 tle
咱們今天還是輪播圖,今天說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輪播圖
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
