jQuery實(shí)現(xiàn)類似淘寶輪播圖

本周的作業(yè)是寫一個(gè)類似淘寶首頁的jQuery輪播圖，這里做出記錄。

如有錯(cuò)誤，歡迎批評指證。

html實(shí)現(xiàn)靜態(tài)的布局

靜態(tài)布局分析

一個(gè)輪播圖靜態(tài)的部分分為三個(gè)

• 展示區(qū)
• 圖片的儲(chǔ)存部分
• 左右按鈕
• 下方小圓點(diǎn)作為提示部分

html部分代碼

<div class="container"> <!-- 展示區(qū) --><div class="photoContainer"><img src="img/3.jpg" alt="3" ><img src="img/1.jpg" alt="1" ><img src="img/2.jpg" alt="2" ><img src="img/3.jpg" alt="3" ><img src="img/1.jpg" alt="1" ></div><ul class="dots"> <!-- 三個(gè)小按鈕 --><li class="dot"></li><li class="dot"></li><li class="dot"></li></ul><div class="left-triangle"> <!-- 向左的箭頭 --><img src="img/left_arrow.png" id="left"></div><div class="right-triangle"> <!-- 向右的箭頭 --><img src="img/left_arrow.png" id="right"></div></div>

---

css部分

• 設(shè)置展示區(qū) container的樣式

.container{width: 600px; height: 400px; /*寬和高可以自己設(shè)置*/background: black;margin:20px auto;overflow: hidden; position: relative; }

利用overflow屬性將超出展示區(qū)的部分隱藏

圖片的容器依靠展示區(qū)的容器定位 設(shè)置position屬性

• 設(shè)置圖片的容器 和 圖片

.photoContainer{position: absolute;left: -600px;display: inline-block;white-space: nowrap; } .photoContainer img{width: 600px;height: 400px; /*和展示區(qū)的長寬設(shè)置為一樣的*/margin: 0;padding: 0;display: inline-block; }

---

• 左右箭頭的設(shè)置

.left-triangle{position: absolute;top: 50%;left: 0;margin-top:-27.2px;margin-left:-37px;transition: margin-left 1s;cursor: pointer; } .right-triangle{position: absolute;top: 50%;right: 0;margin-top:-27.2px;margin-right:-37px;transition: margin-right 1s;cursor: pointer; } #right{transform: rotate(180deg); /*順時(shí)針旋轉(zhuǎn)180°*/ }

---

• 小圓點(diǎn)部分

.dots{width: inherit;/*獲取父元素的相應(yīng)值*/position: absolute;bottom: 10px;text-align: center; } .dot{display: inline-block;width: 20px;height: 20px;border-radius: 50%;background: white;margin-right: 20px;cursor: pointer; } .redDot{background: red; }

其中的.redDot是高亮顯示的樣式

---

• 設(shè)置部分動(dòng)畫 讓左右箭頭的出現(xiàn)和消失

/*暫時(shí)css確定鼠標(biāo)移動(dòng)到 出現(xiàn)左右小圖標(biāo)*/ .container:hover .left-triangle{margin-left:0; } .container:hover .right-triangle{margin-right:0; }

jQuery 邏輯部分

功能分析

• 自動(dòng)循環(huán)播放
• 點(diǎn)擊箭頭實(shí)現(xiàn)圖片替換
• 鼠標(biāo)放入容器內(nèi)循環(huán)停止
• 鼠標(biāo)移開容器 循環(huán)繼續(xù)
• 下方原點(diǎn)根據(jù)圖片響應(yīng)的滾動(dòng) 并且點(diǎn)擊可以移動(dòng)到相應(yīng)的圖片

功能實(shí)現(xiàn)

1）自動(dòng)循環(huán)播放

這個(gè)部分的難點(diǎn)在于：

• 第一張和最后一張如何無縫的銜接。
• 如何實(shí)現(xiàn)循環(huán)播放

對于第一個(gè)問題：

一個(gè)小技巧就是在要展示的圖片的第一張前面放最后一張

最后一張圖片的后面放上第一張圖片

代碼如下：

<div class="photoContainer"><img src="img/3.jpg" alt="3" ><img src="img/1.jpg" alt="1" ><img src="img/2.jpg" alt="2" ><img src="img/3.jpg" alt="3" ><img src="img/1.jpg" alt="1" > </div>

第二個(gè)問題：

使用定時(shí)器

• setInterval()方法會(huì)重復(fù)調(diào)用一個(gè)函數(shù)或執(zhí)行一個(gè)代碼段，在每次調(diào)用之間具有固定的時(shí)間延遲，返回一個(gè)intervalID，可以作為參數(shù)傳給clearInterval()來取消該定時(shí)器。

利用圖片容器的寬度，不斷移動(dòng)left的定位，就可以讓圖片每次在展示區(qū)顯示一次

使用animate屬性讓圖片有拖動(dòng)的效果

解決的了以上兩個(gè)問題就可以寫定時(shí)器部分

//默認(rèn)第一個(gè)小圓點(diǎn)是亮的$(".dots").children("li").eq(0).addClass("redDot");//獲取圖片的寬度var imgWidth = $(".photoContainer").children('img').eq(0).width();//獲取原點(diǎn)的數(shù)量var length = $(".dots").children('li').length; //設(shè)置定時(shí)器的變量var time; function run(){clearInterval(time); //清除迭代器防止鬼畜time = setInterval(function(){//亮小圓點(diǎn)$(".dots").children('li').each(function(){//如果是當(dāng)前圖片if($(this).hasClass("redDot")){num = $(this).index()+ 1;//圖片移動(dòng)$(".photoContainer").animate({//去掉收尾用于銜接的圖片的寬度left :-num*imgWidth - imgWidth + "px"},800);//到達(dá)最后一張，從頭開始if(num == length){$(".photoContainer").animate({left:-imgWidth+"px"},0);num = 0;}}});//改變相應(yīng)小圓點(diǎn)的樣式$(".dots").children('li').eq(num).addClass("redDot");//移除其他小點(diǎn)的樣式$(".dots").children('li').eq(num).siblings("li").removeClass('redDot');},2000);}

注意：

• 此處是根據(jù)遍歷小圓點(diǎn)的樣式來判斷當(dāng)前是哪一個(gè)圖片，避免全局變量統(tǒng)計(jì)。以便實(shí)現(xiàn)之后的功能
• 使用定時(shí)器之前一定要清除定時(shí)器。不然多次點(diǎn)擊之后就會(huì)出現(xiàn)非常鬼畜的速度。

---

2) 鼠標(biāo)移入和移除實(shí)現(xiàn)停止和繼續(xù)移動(dòng)

給容器添加相應(yīng)的清除和創(chuàng)建定時(shí)器事件就可以實(shí)現(xiàn)：

//鼠標(biāo)移動(dòng)到窗口內(nèi)$(".container").mousemove(function(event) {clearInterval(time);}); //移出窗口內(nèi)$(".container").mouseout(function(event) {run();});

3）點(diǎn)擊左邊箭頭向左移動(dòng)

難點(diǎn)：第一張圖片移動(dòng)到最后一張圖片

可以通過在第一張圖片的dom結(jié)構(gòu)之前加最后一張圖片，直接用animate屬性向左移動(dòng)，時(shí)間為0.多添加的圖片就作為鋪墊效果。實(shí)現(xiàn)無縫鏈接

//當(dāng)達(dá)到最左邊的時(shí)候 if(flag < 0){ flag = length-1; $(".photoContainer").animate({left: -flag * imgWidth - imgWidth+"px"}, 0); }

整體代碼

$(".left-triangle").click(function(event) {var flag; //判斷當(dāng)前在哪一個(gè)照片$(".dots").children('li').each(function(){//將圖片容器向右移動(dòng)if($(this).hasClass('redDot')){flag = $(this).index() - 1;$(".photoContainer").animate({left: -flag * imgWidth - imgWidth+"px"}, 300);//當(dāng)達(dá)到最左邊的時(shí)候if(flag < 0){flag = length-1;$(".photoContainer").animate({left: -flag * imgWidth - imgWidth+"px"}, 0);}}});//圖標(biāo)按鈕改變$(".dots").children('li').eq(flag).addClass('redDot');$(".dots").children('li').eq(flag).siblings('li').removeClass('redDot');});

4) 點(diǎn)擊右邊箭頭向右移動(dòng)

與左邊箭頭類似 只需在最后一張后面添加第一張圖片，同時(shí)annimate時(shí)間設(shè)置為0.

//右邊按鈕添加事件$(".right-triangle").click(function(event) {var flag ;//判斷當(dāng)前在哪一個(gè)照片$(".dots").children('li').each(function(){//將圖片容器向左移動(dòng)if($(this).hasClass('redDot')){flag = $(this).index() + 1;console.log(flag);$(".photoContainer").animate({left: -flag * imgWidth - imgWidth +"px"}, 300);//當(dāng)達(dá)到最右邊的時(shí)候 回到最左邊if(flag == length){flag = 0;$(".photoContainer").animate({left: -imgWidth + "px"}, 0);}}});//圖標(biāo)按鈕改變$(".dots").children('li').eq(flag).addClass('redDot');$(".dots").children('li').eq(flag).siblings('li').removeClass('redDot');});

5) 點(diǎn)擊圓點(diǎn)切換圖片

利用事件委托 給父元素添加事件。判斷當(dāng)前圖片并進(jìn)行移動(dòng)。

//給小點(diǎn)添加事件 事件委托$(".dots").on("click","li",function(event) {$(this).addClass('redDot');$(this).siblings('li').removeClass('redDot');//獲取當(dāng)前序號var flag = $(this).index();$(".photoContainer").animate({left: -flag*imgWidth - imgWidth + "px"},300);});

總結(jié)

以上是生活随笔為你收集整理的jQuery实现类似淘宝轮播图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。