用JS實(shí)現(xiàn)輪播圖效果(二)
在上一篇用JS實(shí)現(xiàn)圖片輪播效果代碼(一)的基礎(chǔ)上,增加了左右箭頭的響應(yīng)事件,實(shí)現(xiàn)了點(diǎn)擊左右箭頭也可以讓圖片滾動(dòng):
js代碼如下:
window.onload = function(){ //輪播初始化 var lunbo = document.getElementById('content'); var imgs = lunbo.getElementsByTagName('img'); var uls = lunbo.getElementsByTagName('ul'); var lis = lunbo.getElementsByTagName('li'); var next = document.getElementById('next'); var prev = document.getElementById('prev'); var item = 0; //初始狀態(tài)下,一個(gè)圓圈為高亮模式 lis[0].style.fontSize = '26px'; lis[0].style.color = '#fff'; imgs[0].style.display = 'block'; //定義一個(gè)全局變量,用來進(jìn)行自動(dòng)輪播圖片順序的變化 var pic_index = 1; //自動(dòng)輪播.使用pic_time記錄播放,可以隨時(shí)使用clearInterval()清除掉。 var pic_time = setInterval(autobofang,1000); //自動(dòng)播放的事件處理 function autobofang(){ if(pic_index >= lis.length){ pic_index = 0; } picChange(pic_index); pic_index++; } //手動(dòng)輪播 for(var i=0;i<lis.length;i++){ lis[i].addEventListener("mouseover",change,false); } function change(event){ var event=event||window.event; var target=event.target||event.srcElement; var children = target.parentNode.children; for(var i=0;i<children.length;i++){ if(target == children[i]){ picChange(i); } } } //圖片切換函數(shù) function picChange(i){ //讓所有圖片都不顯示,所有圓圈都為普通樣式 for(var j=0;j<imgs.length;j++){ imgs[j].style.display = 'none'; lis[j].style.fontSize = '24px'; lis[j].style.color = '#999'; } //讓選中的索引的圖片顯示,對(duì)應(yīng)的圓圈高亮 imgs[i].style.display = 'block'; lis[i].style.fontSize = '26px'; lis[i].style.color = '#fff'; } //當(dāng)鼠標(biāo)移近圖片區(qū)域內(nèi),自動(dòng)播放停止 lunbo.addEventListener("mouseover",function(){ clearInterval(pic_time); },false); //當(dāng)鼠標(biāo)移出圖片區(qū)域內(nèi),自動(dòng)播放繼續(xù) lunbo.addEventListener("mouseout",function(){pic_time = setInterval(autobofang,1000); },false); //后退箭頭點(diǎn)擊事件,圖片會(huì)跟著點(diǎn)擊事件不斷變化 next.addEventListener("click",movenext,false); function movenext(){ if(item == 2){ item=0; } else{ item+=1; } picChange(item); } prev.addEventListener("click",moveprev,false); function moveprev(){ if(item == 0){ item=2; } else{ item-=1; } picChange(item); } }
效果圖:鼠標(biāo)劃過箭頭的效果圖
當(dāng)鼠標(biāo)點(diǎn)擊到箭頭,圖片會(huì)跟著變化,下面的小圓圈也會(huì)跟著顯示對(duì)應(yīng)圖片的高亮效果
總結(jié):
基本輪播效果已經(jīng)實(shí)現(xiàn),后期需要做的事:是對(duì)代碼要進(jìn)行精簡(jiǎn),封裝,提高運(yùn)行效率。
- 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)左右無縫輪播圖代碼
- 簡(jiǎn)單的JS輪播圖代碼
- 利用AngularJs實(shí)現(xiàn)京東首頁(yè)輪播圖效果
- js改變透明度實(shí)現(xiàn)輪播圖的算法
- 簡(jiǎn)單實(shí)現(xiàn)AngularJS輪播圖效果
- 原生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)效果示例
- 原生JavaScript實(shí)現(xiàn)精美的淘寶輪播圖效果示例【附demo源碼下載】
相關(guān)文章
微信小程序?qū)崿F(xiàn)導(dǎo)航欄和內(nèi)容上下聯(lián)動(dòng)功能代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)導(dǎo)航欄和內(nèi)容上下聯(lián)動(dòng)功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06關(guān)于JavaScript中forEach和each用法淺析
這篇文章主要給大家介紹了關(guān)于JavaScript中forEach和each使用方法的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-07-07JavaScript簡(jiǎn)單實(shí)現(xiàn)關(guān)鍵字文本搜索高亮顯示功能示例
這篇文章主要介紹了JavaScript簡(jiǎn)單實(shí)現(xiàn)關(guān)鍵字文本搜索高亮顯示功能,涉及javascript基于事件響應(yīng)的頁(yè)面元素遍歷、分割、替換等相關(guān)操作技巧,需要的朋友可以參考下2018-07-07注意 JavaScript 中 RegExp 對(duì)象的 test 方法
注意 JavaScript 中 RegExp 對(duì)象的 test 方法...2007-01-01BootStrap3學(xué)習(xí)筆記(一)之網(wǎng)格系統(tǒng)
本文給大家介紹BootStrap3網(wǎng)格系統(tǒng)的相關(guān)知識(shí),本文介紹的非常詳細(xì),具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-05-05異步動(dòng)態(tài)加載js與css文件的js代碼
這篇文章介紹了異步動(dòng)態(tài)加載js與css文件的幾種方法,有需要的朋友可以參考一下2013-09-09