原生JavaScript實(shí)現(xiàn)精美的淘寶輪播圖效果示例【附demo源碼下載】
本文實(shí)例講述了原生JavaScript實(shí)現(xiàn)的淘寶輪播圖效果。分享給大家供大家參考,具體如下:
輪播圖是我們學(xué)習(xí)原生js的必經(jīng)之路
它包含很多基本知識(shí)的運(yùn)用,像this的使用,DOM的操作,還有setInterval的使用和清除,浮動(dòng)與定位等等,很好的考察了我們的基礎(chǔ)知識(shí)牢不牢固,
話不多說(shuō),直接上圖
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樣式如下:
/* 第一步:設(shè)置外部框的樣式 第二步: 設(shè)置圖片框的樣式 第三步: 設(shè)置箭頭的樣式 第四步: 設(shè)置小圓點(diǎn)的樣式 */ #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;/*設(shè)置水平垂直居中*/ right: 0;/*設(shè)置水平垂直居中*/ margin: 0 auto;/*設(shè)置水平垂直居中*/ 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; /*設(shè)置水平垂直居中*/ bottom: 0; /*設(shè)置水平垂直居中*/ margin: auto 0; /*設(shè)置水平垂直居中*/ 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. */ /* *知識(shí)點(diǎn): * this使用 * DOM事件 * 定時(shí)器 * * 思路: * (1)設(shè)置它左右移動(dòng) * 問(wèn)題:傳入數(shù)字為NAN?? * 解決:在頁(yè)面中增加屬性style:left:0 * (2)平滑移動(dòng)(移動(dòng)時(shí)間固定,每次移動(dòng)的距離不一樣) * 問(wèn)題:連續(xù)點(diǎn)擊出現(xiàn)晃動(dòng)?---設(shè)置標(biāo)志位 * 出現(xiàn)空白頁(yè)??--- 第一張圖片前加上最后一張,最后一張圖片前加上第一張 * 在類list的標(biāo)簽中增加屬性style:left:-520px; * 設(shè)置無(wú)限滾動(dòng)判斷 * * (3)設(shè)置小圓點(diǎn) * 首先將所有的類置為空,當(dāng)前類置為on * 綁定小圓點(diǎn)和圖片 * 綁定小圓點(diǎn)和左右箭頭 * 設(shè)置定時(shí)器,鼠標(biāo)劃上去停止,移開自動(dòng)輪播 * * */ //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.設(shè)置函數(shù) function moveImg(dis) { var time = 400;//運(yùn)動(dòng)的總時(shí)間 var eachTime = 10;//每次小移動(dòng)的時(shí)間 var eachDis = dis/(time/eachTime);//每次小移動(dòng)的距離 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'; //無(wú)限滾動(dòng)判斷 if (newWeizhi == 0) { list.style.left = -2600 + 'px'; } if (newWeizhi == -3120) { list.style.left = -520 + 'px'; } } } timer = setInterval(eachMove, 10); } //3.設(shè)置點(diǎn)擊切換圖片 next.onclick = function () { if(!flag) return; moveImg(-520); //綁定箭頭和小圓點(diǎn) if (index == 4) { index = 0; } else { index++; } buttonsShow(); }; prev.onclick = function () { if(!flag) return; moveImg(520); //綁定箭頭和小圓點(diǎn) if (index == 0) { index = 4; } else { index--; } buttonsShow(); }; //4.設(shè)置小圓點(diǎn)的綁定 function buttonsShow() { //將之前的小圓點(diǎn)的樣式清除 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; //使用自執(zhí)行函數(shù)解決i的賦值問(wèn)題 (function(){ buttons[i].onclick = function(){ if(this.value == index) return; var offset = (this.value - index)* -520; moveImg(offset); index = this.value; buttonsShow(); } })(); } //5.設(shè)置自動(dòng)輪播 timer2 = setInterval(next.onclick,1500); container.onmouseover = function(){ clearInterval(timer2); }; container.onmouseout = function(){ timer2 = setInterval(next.onclick,1000); };
源碼下載:完整實(shí)例代碼點(diǎn)擊此處本站下載。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- js實(shí)現(xiàn)支持手機(jī)滑動(dòng)切換的輪播圖片效果實(shí)例
- js實(shí)現(xiàn)點(diǎn)擊左右按鈕輪播圖片效果實(shí)例
- 原生js實(shí)現(xiàn)移動(dòng)開發(fā)輪播圖、相冊(cè)滑動(dòng)特效
- JS實(shí)現(xiàn)左右無(wú)縫輪播圖代碼
- 簡(jiǎn)單的JS輪播圖代碼
- 利用AngularJs實(shí)現(xiàn)京東首頁(yè)輪播圖效果
- js改變透明度實(shí)現(xiàn)輪播圖的算法
- 簡(jiǎn)單實(shí)現(xiàn)AngularJS輪播圖效果
- 用JS實(shí)現(xiàn)輪播圖效果(二)
- 原生js實(shí)現(xiàn)網(wǎng)易輪播圖效果
- 原生js實(shí)現(xiàn)旋轉(zhuǎn)木馬輪播圖效果
- 原生js實(shí)現(xiàn)焦點(diǎn)輪播圖效果
- JS實(shí)現(xiàn)的簡(jiǎn)單輪播圖運(yùn)動(dòng)效果示例
相關(guān)文章
webpack3升級(jí)到webpack4遇到問(wèn)題總結(jié)
這篇文章主要介紹了webpack3升級(jí)到webpack4遇到問(wèn)題總結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09echarts折線圖每段顯示不同的顏色的實(shí)現(xiàn)
本文主要介紹了echarts折線圖每段顯示不同的顏色的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-09-09簡(jiǎn)述JS中forEach()、map()、every()、some()和filter()的用法
JS中常常需要對(duì)數(shù)組進(jìn)行遍歷、迭代操作,而我們常用的就是for語(yǔ)句對(duì)數(shù)組進(jìn)行迭代,下面這篇文章主要給大家介紹了關(guān)于JS中forEach()、map()、every()、some()和filter()的用法,需要的朋友可以參考下2022-05-05js正則表達(dá)式驗(yàn)證密碼強(qiáng)度【推薦】
本文主要介紹了js利用正則表達(dá)式驗(yàn)證密碼強(qiáng)度的實(shí)例,具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03