用 jQuery 手寫輪播圖
阿新 • • 發佈：2019-01-20
padding 分享 out osi utf http asc con 核心
先上個效果截圖：
主要包含以下功能點：
* 1、頁面加載完，自動循環翻頁
* 2、翻頁按鈕，翻頁
* 3、定點翻頁
* 4、翻頁時同步圓點狀態
* 5、鼠標進入，停止自動翻頁
* 6、快速點擊翻頁的bug(加 isPaging 標誌)
主要包含以下功能點：
* 1、頁面加載完，自動循環翻頁
* 2、翻頁按鈕，翻頁
* 3、定點翻頁
* 4、翻頁時同步圓點狀態
* 5、鼠標進入，停止自動翻頁
* 6、快速點擊翻頁的bug(加 isPaging 標誌)
上代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>輪播圖 - jQuery 版本</title> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; } /** * 輪播圖布局樣式 */ /** * 0、輪播圖容器 */ #container{ position: relative; width: 600px; height: 400px; margin: 50px auto; overflow: hidden; } /** * 1、圖片(模擬)*/ ul#imgs{ position: absolute; width: calc(600px * 7); left: -600px; } ul#imgs li{ float: left; width: 600px; height: 400px; background-color: #42B983; color: white; text-align: center; line-height: 400px; font-size: 100px; } #imgs li:nth-child(odd){ /* 模擬圖片 */ /*background-color: #9ACD32;*/ } /** * 2、前後翻頁按鈕 */ #prev,#next{ position: absolute; top: calc(50% - 15px);; width: 40px; height: 30px; background-color: yellow; border: none; font-weight: bold; font-size: 16px; cursor: pointer; opacity: .6; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #prev,#next:focus{ outline: none; } #prev{ left: 10px; } #next{ right: 10px; } /** * 3、小圓點定點翻頁 */ ul#index{ position: absolute; top: 360px; left: calc(50% - 55px); height: 12px; } ul#index li{ float: left; height: 12px; width: 12px; margin: 0 5px; border-radius:50%; background-color: #800080; opacity: .4; cursor: pointer; } ul#index li.active{ opacity: 1; } </style> <script src="jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script> </head> <body> <!-- 1、進行頁面布局 2、js 代碼 --> <div id="container"> <!--圖片區--> <ul id="imgs"> <li> <div class="img">5</div> </li> <li> <div class="img">1</div> </li> <li> <div class="img">2</div> </li> <li> <div class="img">3</div> </li> <li> <div class="img">4</div> </li> <li> <div class="img">5</div> </li> <li> <div class="img">1</div> </li> </ul> <button id="prev"><</button> <button id="next">></button> <ul id="index"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script type="text/javascript"> /** * 事件綁定 * 1、頁面加載完，自動循環翻頁 * 2、翻頁按鈕，翻頁 * 3、定點翻頁 * 4、翻頁時同步圓點狀態 * 5、鼠標進入，停止自動翻頁 * 6、快速點擊翻頁的bug(加 isPaging 標誌) */ /** * 0、自動輪播 */ /** * 一些可以設置的參數 */ var PAGE_WIDTH = 600, PAGE_SLIDE_TIME = 600, //單頁滑動時間 PAGE_INTERVAL = 1200 + PAGE_SLIDE_TIME, //換頁間隔時間 curIndex = 1, //合法取值 1 ~ 5(0 表示左邊假的，6表示右邊假的) isPaging = false //是否正在翻頁(用來處理連續點擊翻頁產生的bug) var intervalId; $(function(){ intervalId = setInterval(next,PAGE_INTERVAL) }) /** * 1、頁面按鈕 */ $("#next").click(function(){ next() }) $("#prev").click(function(){ next(false) }) $("#index li").click(function(){ next($(this).index() + 1) }) /** * 2、鼠標出入 */ $("#container").hover(function(){ clearInterval(intervalId) },function(){ intervalId = setInterval(next,PAGE_INTERVAL) }) /** * 翻頁核心功能 * next(boolean|number]) * * boolean: 表示前後翻頁 * number: 表示定點翻頁 */ function next(flag=true){ if(isPaging){ return } isPaging = true; var tempIndex = curIndex; //1 確定要翻過去的頁碼,計算 left 值 typeof flag === "boolean" && (curIndex += flag ? 1 : -1) typeof flag === "number" && (curIndex = flag) left = - curIndex * PAGE_WIDTH //2 執行翻頁動畫 $("#imgs").animate({"left":left},PAGE_SLIDE_TIME,function(){ if(curIndex == 0 || curIndex == 6){ //頁碼校正 curIndex = (curIndex + 5) % 5 left = - curIndex * PAGE_WIDTH $("#imgs").css("left",left) } //清除正在翻頁標誌 isPaging = false }) //3 同步點的狀態 $("#index li").eq(tempIndex -1).removeClass("active") $("#index li").eq(curIndex -1).addClass("active") } </script> </body> </html>
用 jQuery 手寫輪播圖