小編這次要給大家分享的是js代碼如何實現(xiàn)輪播圖,文章內(nèi)容豐富,感興趣的小伙伴可以來了解一下,希望大家閱讀完這篇文章之后能夠有所收獲。
作為一家“創(chuàng)意+整合+營銷”的成都網(wǎng)站建設機構,我們在業(yè)內(nèi)良好的客戶口碑。成都創(chuàng)新互聯(lián)提供從前期的網(wǎng)站品牌分析策劃、網(wǎng)站設計、成都網(wǎng)站設計、網(wǎng)站制作、外貿(mào)營銷網(wǎng)站建設、創(chuàng)意表現(xiàn)、網(wǎng)頁制作、系統(tǒng)開發(fā)以及后續(xù)網(wǎng)站營銷運營等一系列服務,幫助企業(yè)打造創(chuàng)新的互聯(lián)網(wǎng)品牌經(jīng)營模式與有效的網(wǎng)絡營銷方法,創(chuàng)造更大的價值。
又從頭到尾把輪播圖研究了一遍,感覺理解更深刻了。
就怕自己搞不懂,分析了各個步驟的思路,為啥用,怎么用。
總算搞清楚了。
話不多說,干貨奉上.
效果圖:
//1,左右按鈕初始隱藏 鼠標進入box 按鈕顯示 鼠標離開box 按鈕隱藏 //獲取元素 var box = document.getElementById('box'); var leftbtn = document.getElementById('leftbtn'); var rigbtn = document.getElementById('rigbtn'); //因為圖片寬度是多個事件需要用到 所以要定義為全局變量 var pic_width = box.clientWidth; //注冊事件 box.addEventListener('mouseenter', function() { leftbtn.style.display = 'block'; rigbtn.style.display = 'block'; //清除定時器 停止自動播放 clearInterval(timer); //停止播放后 清空定時器變量 提升運行效率 timer = null; }); box.addEventListener('mouseleave', function() { leftbtn.style.display = 'none'; rigbtn.style.display = 'none'; //timer在11條里聲明過了 這里就不需要再加var進行聲明了 timer = setInterval(function() { rigbtn.click(); }, 1500); }); //6,創(chuàng)建動畫函數(shù)animate 點擊小圓點 圖片會移動 //因為圖片需要緩慢移動到目標位置 而不是瞬移 所以需要讓動畫函數(shù)帶緩動效果 function animate(obj, target, callback) { //obj是移動的對象 target是移動的目標位置 callback是回調函數(shù) clearInterval(obj.timer); //創(chuàng)建緩動函數(shù) 緩動的核心思想就是把移動到目標位置的距離分成若干小步 //一定時間內(nèi)走一小步,讓這個距離在若干時間完成若干小步后走完 function move() { //定義每一小步走的距離 把一次移動到目標位置的距離分為10份 //每一份就是一個step var step = (target - obj.offsetLeft) / 10; //step可能不是整數(shù) 導致最終移動距離有誤差 //所以要把每一步的step變成整數(shù) //如果step是正數(shù) 就取大于step的最小整數(shù) //如果step是負數(shù) 就取小于step的最大整數(shù) 用Math()的知識 /*if(step > 0) { step = Math.ceil(step);//向上取整 } else { step = Math.floor(step);//向下取整 }*/ //可以將上面的if else語句簡化為三元運算符 step = step > 0 ? Math.ceil(step) : Math.floor(step); //如果走到了目標位置 就清除定時器 if(obj.offsetLeft == target) { clearInterval(obj.timer); //因為回調函數(shù)是定時器結束后再調用函數(shù) //所以這里清除定時器后 需要判斷一下是否有回調函數(shù) 有就調用 沒有就不調用 /*if(callback) { callback(); }*/ //上面的判斷語句可以簡化為 callback&&callback(); } //把每一小步移動的距離和offsetLeft之和,給obj的left值 //注意,這里obj.style.left對應的是數(shù)值+像素單位,一定不要忘了+'px' obj.style.left = obj.offsetLeft + step + 'px'; } //給obj創(chuàng)建專屬的定時器 //用定時器實現(xiàn)一定時間走一小步的結果 這里是40毫秒移動一個step的距離 //注意,專屬定時器不需要用var了 obj.timer = setInterval(move, 40); } //2,動態(tài)添加小圓點 圖片的數(shù)量就是小圓點的個數(shù) //獲取元素 var ul01 = document.getElementById('ul01'); var ul02 = document.getElementById('ul02'); //添加多個li 用for循環(huán) for(var i = 0; i < ul01.children.length; i++) { //創(chuàng)建元素creLi var creLi = document.createElement('li'); //3,創(chuàng)建自定義屬性data-index 用來獲取小圓點的索引號 creLi.setAttribute('data-index', i); //添加元素 ul02.appendChild(creLi); //4,當前點擊的小圓點 顏色發(fā)生變化 創(chuàng)建類urrent //因為圖片默認開始顯示第一張 所以先讓第一個小圓點小時current類 ul02.children[0].className = 'current'; //5,給小圓點創(chuàng)建點擊事件 點擊小圓點 當前點擊的小圓點變色 //用排他思想 for循環(huán) //注冊點擊事件 creLi.addEventListener('click', function() { //干掉所有人 for(var i = 0; i < ul02.children.length; i++) { ul02.children[i].className = ''; } //留下我自己 this.className = 'current'; //7,點擊小圓點 圖片跟著動 調用動畫函數(shù) //分析 點擊圓點1 圖片向左移動0個圖片的寬度box.clientWidth //點擊圓點2 圖片向左移動1個圖片的寬度 以此類推 //圖片移動的距離 就是 當前被點擊圓點的索引號乘以圖片的寬度 //獲取自定義屬性 當前被點擊的小圓點的索引號 var index = this.getAttribute('data-index'); num = index; circle = index; animate(ul01, -index*pic_width); }); } //8,右側按鈕 //8.1 點擊右側按鈕 圖片向左移動 //點擊1次 圖片向左移動1個圖片寬度 顯示圖片2 //點擊2次 向左移動2個圖片寬度 顯示圖片3 以此類推 //當顯示到第3張圖片即最后一張圖片時 再點擊右側按鈕 會顯示空白 //重點: 實現(xiàn)無縫鏈接,即當顯示到最后一張圖片時 再點擊右側按鈕 會顯示圖片1 //怎么做 在圖片3后面克隆一張圖片1 //顯示圖片3時 再點擊按鈕 ul01繼續(xù)向左移動 顯示圖片1 //然后迅速跳轉到跳轉到圖片1 讓ul01.style.left歸零 //設置次數(shù)變量num var num = 0; //克隆圖片1 先克隆 再添加 注意 克隆圖片也是全局事件 不是局部的 var liCopy = ul01.children[0].cloneNode(true)//深克隆 ul01.appendChild(liCopy);//添加新的li后,注意取css里修改ul01的寬度 //console.log(ul01.children.length); 元素個數(shù)變成了4 //獲取元素rigbtn var rigbtn = document.getElementById('rigbtn'); //給按鈕點擊事件安裝節(jié)流閥 var flag = true; //左右按鈕都要用 所以設置全局變量 //注冊點擊事件 rigbtn.addEventListener('click', function() { if(flag) { //初始狀態(tài) 先把節(jié)流閥關了 讓自動播放的圖片播放完一張圖片前 點擊按鈕無效 flag = false; //先做個判斷 //點擊第2次的時候 顯示圖片3 再點擊 就顯示克隆的圖片1 //這時候 讓ul01位置歸零 讓num的值歸零以便從頭開始 if(num == ul01.children.length - 1) { ul01.style.left = 0; num = 0; } //點擊1次 移動距離就是1*pic_width //點擊1次 讓num自增1 num++; //注意 這里如果先自增 再做判斷 //會出現(xiàn)一個bug 就是當再次顯示圖片1時 點擊無效 重新點擊才會顯示圖片2 //因為點擊第三次時 本來應該跳轉到圖片1的 結果num被歸零了 再點擊還是顯示圖片1 //調用動畫函數(shù) animate(ul01, -num*pic_width, function() { //function(){}是回調函數(shù) //動畫結束一個動作后 即播放完該圖片后 再回頭打開節(jié)流閥 讓下一次點擊生效 flag = true; }); circle++; if(circle == ul02.children.length) { circle = 0; } //因為這段排他思想的小圓點代碼重復使用 所以可以封裝成一個函數(shù)進行調用 /*for(var i = 0; i < ul02.children.length; i++) { ul02.children[i].className = ''; } ul02.children[circle].className = 'current';*/ cir(); } }); function cir() { for(var i = 0; i < ul02.children.length; i++) { ul02.children[i].className = ''; } ul02.children[circle].className = 'current'; } //9,點擊按鈕 圖片移動 小圓點跟著移動 點擊小圓點 圖片跟著移動 num次數(shù)也變化 //讓圖片 小圓點 按鈕次數(shù) 一起變化的核心 就是圖片動 num變化 小圓點當前的current類發(fā)生變化 //即 圖片移動 當前小圓點變色 點擊按鈕 當前小圓點變色 //當前小圓點變色 圖片移動 按鈕次數(shù)發(fā)生變化 num index 圖片距離 一起變化 //但是index是局部變量 怎么讓三者綁定呢 //就要重新創(chuàng)建一個全局變量 代替index 作為小圓點當前的索引號 讓三者綁定 var circle = 0; //10,點擊左側按鈕 //和右側按鈕點擊事件的代碼基本相同 但是方向相反 需要修改一些數(shù)據(jù) //直接把右側按鈕點擊事件的代碼復制過來 然后修改數(shù)據(jù) //獲取元素leftbtn var leftbtn = document.getElementById('leftbtn'); //注冊點擊事件 leftbtn.addEventListener('click', function() { //同理,給左側按鈕也加個節(jié)流閥 if(flag) { flag = false; //先做個判斷 //開始時 未點擊 num為0 if(num == 0) { num = ul01.children.length-1; ul01.style.left = -num*pic_width + 'px'; } //點擊左側按鈕時 num自減 num--; animate(ul01, -num*pic_width, function() { flag = true; }); circle--; if(circle < 0) { circle = ul02.children.length - 1; } //因為這段排他思想的小圓點代碼重復使用 所以可以封裝成一個函數(shù)進行調用 /*for(var i = 0; i < ul02.children.length; i++) { ul02.children[i].className = ''; } ul02.children[circle].className = 'current';*/ cir(); } }); //11,圖片自動播放 相當于每隔一定時間 用定時器調用點擊右側按鈕的時間 var timer = setInterval(function() { rigbtn.click(); }, 1500); //12,鼠標進入box 停止自動播放 鼠標離開box 繼續(xù)自動播放 //13,節(jié)流閥 控制圖片播放的頻率 //當前 快速點擊按鈕 圖片高速播放 timer定時器還沒執(zhí)行結束 就開始播放下一張圖片了 //用flag控制 flag為true 打開節(jié)流閥 啟用定時器 播放圖片 //flag為false 關閉節(jié)流閥 關閉的定時器 點擊按鈕無效 停止播放圖片 //給按鈕點擊事件安裝節(jié)流閥
看完這篇關于js代碼如何實現(xiàn)輪播圖的文章,如果覺得文章內(nèi)容寫得不錯的話,可以把它分享出去給更多人看到。
當前標題:js代碼如何實現(xiàn)輪播圖
文章網(wǎng)址:http://bm7419.com/article26/goisjg.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供外貿(mào)建站、網(wǎng)站維護、微信公眾號、虛擬主機、網(wǎng)站導航、搜索引擎優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)