本文實例講述了原生JavaScript實現的淘寶輪播圖效果。分享給大家供大家參考，具體如下：
輪播圖是我們學習原生js的必經之路
它包含很多基本知識的運用，像this的使用，DOM的操作，還有setInterval的使用和清除，浮動與定位等等，很好的考察了我們的基礎知識牢不牢固，
話不多說，直接上圖
HTML代碼如下：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>淘寶輪播圖</title> <link rel="stylesheet" href="css/initialize.css" rel="external nofollow" /> <link rel="stylesheet" href="css/tblunbotu.css" rel="external nofollow" /></head><body><div id="container" class="clearFix"> <div id="list" class="clearFix" style="left: -520px"> <img src="img/5.jpg" alt=""/> <img src="img/1.jpg" alt=""/> <img src="img/2.jpg" alt=""/> <img src="img/3.jpg" alt=""/> <img src="img/4.jpg" alt=""/> <img src="img/5.jpg" alt=""/> <img src="img/1.jpg" alt=""/> </div> <div id="buttons" class="clearFix"> <span class="on"></span> <span></span> <span></span> <span></span> <span></span> </div> <a href="javascript:;" rel="external nofollow" rel="external nofollow" id="prev" class="arrow"><</a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" id="next" class="arrow">></a></div><script type="text/javascript" src="js/tblunbotu.js"></script></body></html>
CSS樣式如下：
/* 第一步：設置外部框的樣式 第二步: 設置圖片框的樣式 第三步: 設置箭頭的樣式 第四步: 設置小圓點的樣式*/#container { margin: 50px auto; position: relative; width: 520px; height: 280px; overflow: hidden;}#list { position: absolute; z-index: 1; width: 3640px;}#list img { float: left; width: 520px; height: 280px;}#buttons { height: 10px; width: 100px; position: absolute; left: 0;/*設置水平垂直居中*/ right: 0;/*設置水平垂直居中*/ margin: 0 auto;/*設置水平垂直居中*/ bottom: 20px; z-index: 2;}#buttons span { float: left; margin-right: 5px; width: 10px; height: 10px; border: 1px solid #cccccc; border-radius: 50%; background: #333; cursor: pointer;}#buttons .on { background: orangered;}.arrow { width: 40px; height: 40px; display: none; position: absolute; top: 0; /*設置水平垂直居中*/ bottom: 0; /*設置水平垂直居中*/ margin: auto 0; /*設置水平垂直居中*/ font-size: 36px; font-weight: bold; line-height: 39px; text-align: center; color: #fff; background-color: RGBA(0, 0, 0, .3); cursor: pointer; z-index: 2;}.arrow:hover{ background-color: RGBA(0, 0, 0, .7);}#container:hover .arrow { display: block;}#prev{ left: 10px;}#next{ right: 10px;}javascript代碼如下
/** * Created by zhm on 17.1.15. */ /* *知識點： * this使用 * DOM事件 * 定時器 * * 思路： * （1）設置它左右移動 * 問題：傳入數字為NAN?? * 解決：在頁面中增加屬性style：left:0 * （2）平滑移動（移動時間固定，每次移動的距離不一樣） * 問題：連續點擊出現晃動？---設置標志位 * 出現空白頁？？--- 第一張圖片前加上最后一張，最后一張圖片前加上第一張 * 在類list的標簽中增加屬性style：left:-520px; * 設置無限滾動判斷 * * （3）設置小圓點 * 首先將所有的類置為空，當前類置為on * 綁定小圓點和圖片 * 綁定小圓點和左右箭頭 * 設置定時器，鼠標劃上去停止，移開自動輪播 * * */ //1.獲取元素 var container = document.getElementById("container"); var list = document.getElementById("list"); var prev = document.getElementById("prev"); var next = document.getElementById("next"); var buttons = document.getElementById('buttons').getElementsByTagName('span'); var timer = null; var timer2 = null; var flag = true; var index =0; //2.設置函數 function moveImg(dis) { var time = 400;//運動的總時間 var eachTime = 10;//每次小移動的時間 var eachDis = dis/(time/eachTime);//每次小移動的距離 var newWeizhi = parseInt(list.style.left) + dis;//新位置 flag = false; function eachMove(){ if(dis > 0 && parseInt(list.style.left)< newWeizhi || dis < 0 && parseInt(list.style.left)>newWeizhi){ list.style.left = parseInt(list.style.left) + eachDis + 'px'; }else { flag = true; clearInterval(timer); list.style.left = newWeizhi + 'px'; //無限滾動判斷 if (newWeizhi == 0) { list.style.left = -2600 + 'px'; } if (newWeizhi == -3120) { list.style.left = -520 + 'px'; } } } timer = setInterval(eachMove, 10); } //3.設置點擊切換圖片 next.onclick = function () { if(!flag) return; moveImg(-520); //綁定箭頭和小圓點 if (index == 4) { index = 0; } else { index++; } buttonsShow(); }; prev.onclick = function () { if(!flag) return; moveImg(520); //綁定箭頭和小圓點 if (index == 0) { index = 4; } else { index--; } buttonsShow(); }; //4.設置小圓點的綁定 function buttonsShow() { //將之前的小圓點的樣式清除 for (var i = 0; i < buttons.length; i++) { if (buttons[i].className == "on") { buttons[i].className = ""; break; } } buttons[index].className = "on"; } for(var i = 0 ;i<buttons.length;i++){ buttons[i].value = i; //使用自執行函數解決i的賦值問題 (function(){ buttons[i].onclick = function(){ if(this.value == index) return; var offset = (this.value - index)* -520; moveImg(offset); index = this.value; buttonsShow(); } })(); } //5.設置自動輪播 timer2 = setInterval(next.onclick,1500); container.onmouseover = function(){ clearInterval(timer2); }; container.onmouseout = function(){ timer2 = setInterval(next.onclick,1000); };源碼下載：完整實例代碼點擊此處本站下載。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
