用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)行精簡,封裝,提高運(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)左右無縫輪播圖代碼
- 簡單的JS輪播圖代碼
- 利用AngularJs實(shí)現(xiàn)京東首頁輪播圖效果
- js改變透明度實(shí)現(xià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)的簡單輪播圖運(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-07
JavaScript簡單實(shí)現(xiàn)關(guān)鍵字文本搜索高亮顯示功能示例
這篇文章主要介紹了JavaScript簡單實(shí)現(xiàn)關(guān)鍵字文本搜索高亮顯示功能,涉及javascript基于事件響應(yīng)的頁面元素遍歷、分割、替換等相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
注意 JavaScript 中 RegExp 對(duì)象的 test 方法
注意 JavaScript 中 RegExp 對(duì)象的 test 方法...2007-01-01
BootStrap3學(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

