標籤：display func -- width class style block animate next
我用的jQuery庫jquery-3.2.1.js可以在官網下載：http://jquery.com/download/
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jQuery實現輪播圖</title> <script type="text/javascript" src="jquery-3.2.1.js"></script> <style> #lunbo { width: 850px; height: 500px; margin: 0px auto; position: relative; overflow: hidden; } #list { position: absolute; width: 4250px; height: 500px; z-index: 1; } #list img { width: 850px; height: 500px; float: left; } #buttons { position: absolute; width: 90px; height: 15px; z-index: 2; left: 389px; bottom: 20px; } #buttons span { width: 15px; height: 15px; background: #f1f1f1; float: left; margin-right: 15px; border-radius: 50%; cursor: pointer; } #buttons .on { background: #cf1828; } .arrow { position: absolute; top: 230px; z-index: 2; display: none; width: 35px; height: 60px; font-size: 30px; font-weight: bold; line-height: 60px; text-align: center; color: #fff; background-color: RGBA(0, 0, 0, .3); cursor: pointer; text-decoration: none; } .arrow:hover { background-color: RGBA(0, 0, 0, .7); } #lunbo:hover .arrow { display: block; } #prev { left: 0px; } #next { right: 0px; } </style> <script> $(document).ready(function () { var lunbo = $("#lunbo"); var list = $("#list"); var prev = $("#prev"); var next = $("#next"); var spanGroup = $("#buttons span"); var imgwidth = $("#list img:first-child").eq(0).width(); var now = 1; var timer = null; prev.on("click", function () { clearInterval(timer); now--; if (now < 0) { if (Math.abs(now) % 3 == 1) { now = 2; } else if (Math.abs(now) % 3 == 2) { now = 1; } else { now = 0; } } showPic(now); if (now == 0) { now = 3; } if (now == 4) { now = 1; } }); next.on("click", function () { clearInterval(timer); now++; if (now > 4) { if (now % 3 == 0) { now = 3; } else if (now % 3 == 1) { now = 4; } else { now = 2; } } showPic(now); if (now == 0) { now = 3; } if (now == 4) { now = 1; } }); spanGroup.on("click", function () { now = spanGroup.index(this) + 1; showPic(now); }); timer = setInterval(auto, 3000); function auto() { now++; showPic(now); if (now == 0) { now = 3; } if (now == 4) { now = 1; } } lunbo.mouseover(function () { clearInterval(timer); }); lunbo.mouseout(function () { timer = setInterval(auto, 3000); }) function showPic(index) { list.animate({ left: -index * imgwidth }, 1000, function () { spanGroup.eq((index - 1) % 3).addClass("on").siblings().removeClass("on"); if (index == 0) { list.css({ "left": -3 * imgwidth + "px" }); } if (index == 4) { list.css({ "left": -imgwidth + "px" }); } }); }; }); </script></head><body> <div id="lunbo"> <div id="list" style="left:-850px"> <img src="images/lunbo3.jpg" alt="3" /> <img src="images/lunbo1.jpg" alt="1" /> <img src="images/lunbo2.jpg" alt="2" /> <img src="images/lunbo3.jpg" alt="3" /> <img src="images/lunbo1.jpg" alt="1" /> </div> <div id="buttons"> <span class="on"></span> <span></span> <span></span> </div> <a href="javascript:;" id="prev" class="arrow"><</a> <a href="javascript:;" id="next" class="arrow">></a> </div></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
