資訊專欄INFORMATION COLUMN
摘要：結(jié)構(gòu)毫無美感的，畢竟就一個嘛上一張下一張代碼使用定時器定時切換圖片輪播效果鼠標(biāo)停留在圖片上時停止切換圖片，離開后繼續(xù)切換圖片圖片點擊上一張下一張時自動切換，并自我進(jìn)行判斷是否為第一張或最后一張。
這年頭，哪個app，哪個小程序沒個輪播圖呢，并且鴨，哪個ui框架不給你提供呢是吧。
但是懂寫原生輪播圖是不是也很裝逼呀嘻嘻。so，我們還是先得理解輪播圖的技術(shù)要點是什么吧
1. 使用定時器定時切換圖片輪播效果
2. 鼠標(biāo)停留在圖片上時停止切換圖片，離開后繼續(xù)切換圖片
3. 圖片點擊上一張下一張時自動切換，并自我進(jìn)行判斷是否為第一張或最后一張。
當(dāng)圖片為第一張時，點擊上一張到最后一張圖片，當(dāng)圖片為最后一張時，點擊下一張到第一張。
HTML結(jié)構(gòu)（毫無美感的html，畢竟就一個demo嘛）
上一張
下一張
JavaScript代碼
/*
* 1.使用定時器定時切換圖片輪播效果
* 2.鼠標(biāo)停留在圖片上時停止切換圖片，離開后繼續(xù)切換圖片
* 3.圖片點擊上一張下一張時自動切換，并自我進(jìn)行判斷是否為第一張或最后一張。
* 當(dāng)圖片為第一張時，點擊上一張到最后一張圖片，當(dāng)圖片為最后一張時，點擊下一張到第一張。
*
* onmouseover 事件會在鼠標(biāo)指針移動到指定的對象上時發(fā)生。
* onmouseout 事件會在鼠標(biāo)指針移出指定的對象時發(fā)生。
* */
// 將所有圖片url放入一個數(shù)組，將index的值設(shè)置為0
var imgs = ["img/1.jpg", "img/2.jpg", "img/3.jpg"];
var index = 0;
var stopValue = 0;
var startValue = 0;
var img = document.getElementsByTagName("img")[0]; // 獲取img的dom
function carousel() { // 切換圖片
if (index < imgs.length-1) {
index++;
img.setAttribute("src", imgs[index]);
} else{
index = 0;
img.setAttribute("src", imgs[index]);
}
}
/*
* 定義兩個全局變量stopValue 和startValue 為0，
* onmouseover和onmouseout從進(jìn)入對應(yīng)的元素范圍到離開對應(yīng)的元素范圍會執(zhí)行很多次，
* 通過兩個全局全局變量，讓它不管在對應(yīng)的元素范圍內(nèi)如何移動都只執(zhí)行一次，
* 避免setInterval時間出錯。
* */
function stop(){ // 進(jìn)入圖片時停止輪播
stopValue+=1;
if (stopValue < 2) {
clear();
startValue = 0;
}
}
function start(){ // 離開圖片時繼續(xù)輪播
startValue+=1;
if (startValue < 2) {
setInt();
stopValue = 0;
}
}
function clear(){ // 清除定時器
clearInterval(int);
}
function setInt(){ // 重新執(zhí)行定時器
int = setInterval("carousel()", 3000);
}
/*
* 在切換圖片時也調(diào)用了shop()和start()方法
* 目的時為了解除在輪播過程中，在即將切換圖片時，手動切換圖片了卻又立馬進(jìn)入到下一張圖片
* */
function left(){ // 上一張切換圖片
stop();
if (index > 0) {
index -= 1;
img.setAttribute("src", imgs[index]);
} else{
index = imgs.length-1;
img.setAttribute("src", imgs[index]);
}
start();
}
function right(){ // 下一張切換圖片
stop();
if (index < imgs.length-1) {
index +=1;
img.setAttribute("src", imgs[index]);
} else{
index = 0;
img.setAttribute("src", imgs[index]);
}
start();
}
var int = setInterval("carousel()", 3000);
噢對了，這次滴文章參考了這位大大的文章，嘻嘻該承認(rèn)還是得承認(rèn)，誰讓我還是一個孩子呢
貌似這距離實用的輪播效果不遠(yuǎn)了呀，但肯定還有很多缺點，望大家指出~~~
我滴媽呀，可能加個css過渡效果可能會順眼很多，可誰讓我css渣呢，不說了去進(jìn)修先~~~
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/99976.html
摘要：綁定輪播事件然后是鼠標(biāo)移入移出事件的綁定鼠標(biāo)移入移出事件移入時停止輪播播放的定時器，移出后自動開始下一張的播放。 通過上一篇文章的學(xué)習(xí)，我們基本掌握了一個輪子的封裝和開發(fā)流程。那么這次將帶大家開發(fā)一個更有難度的項目——輪播圖，希望能進(jìn)一步加深大家對于面向?qū)ο蟛寮_發(fā)的理解和認(rèn)識。 So, Lets begin! 目前項目使用 ES5及UMD 規(guī)范封裝，所以在前端暫時只支持標(biāo)簽的引入方式...
摘要：站在這個時間點上，我對自己之前三次失敗的面試經(jīng)歷做了一次深度回顧。關(guān)于我第三次面試失敗的經(jīng)歷，依然是與輪播圖有關(guān)。當(dāng)然，這次思特奇面試之旅，最后也是以失敗告終，這也是我離進(jìn)大廠最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言 時間的齒輪已經(jīng)來到了2017年的11月份，距離2018年僅僅還剩下不到兩...
摘要：站在這個時間點上，我對自己之前三次失敗的面試經(jīng)歷做了一次深度回顧。關(guān)于我第三次面試失敗的經(jīng)歷，依然是與輪播圖有關(guān)。當(dāng)然，這次思特奇面試之旅，最后也是以失敗告終，這也是我離進(jìn)大廠最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言 時間的齒輪已經(jīng)來到了2017年的11月份，距離2018年僅僅還剩下不到兩...
摘要：鼠標(biāo)放到輪播圖的圖片上時不再自動輪播并且左右箭頭顯示出來，鼠標(biāo)移開時左右箭頭隱藏掉并且自動輪播。核心原理清除定時器，綁定事件，重構(gòu)下代碼封裝出往右往左輪播函數(shù)和自動輪播函數(shù)。 需求與分析 需求：循環(huán)無縫自動輪播五張圖，按左右箭頭可以手動切換圖片，鼠標(biāo)點擊輪播圖下面按鈕 1 2 3 4 5會跳轉(zhuǎn)到對應(yīng)的第1 2 3 4 5張圖片。鼠標(biāo)放到輪播圖的圖片上時不再自動輪播并且左右箭頭顯示出來，...
閱讀 2913·2021-11-18 10:02
閱讀 2381·2021-09-30 09:47
閱讀 1975·2021-09-27 14:01
閱讀 3242·2021-08-16 11:00
閱讀 3252·2019-08-30 11:06
閱讀 2476·2019-08-29 17:29
閱讀 1634·2019-08-29 13:19
閱讀 518·2019-08-26 13:54
