這篇文章主要介紹了用JS實現(xiàn)輪播圖效果（二）的相關資料,需要的朋友可以參考下

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)下，一個圓圈為高亮模式

lis[0].style.fontSize = '26px';

lis[0].style.color = '#fff';

imgs[0].style.display = 'block';

//定義一個全局變量，用來進行自動輪播圖片順序的變化

var pic_index = 1;

//自動輪播.使用pic_time記錄播放，可以隨時使用clearInterval()清除掉。

var pic_time = setInterval(autobofang,1000);

//自動播放的事件處理

function autobofang(){

if(pic_index >= lis.length){

pic_index = 0;

}

picChange(pic_index);

pic_index++;

}

//手動輪播

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';

}

//讓選中的索引的圖片顯示，對應的圓圈高亮

imgs[i].style.display = 'block';

lis[i].style.fontSize = '26px';

lis[i].style.color = '#fff';

}

//當鼠標移近圖片區(qū)域內(nèi)，自動播放停止

lunbo.addEventListener("mouseover",function(){

clearInterval(pic_time);

},false);

//當鼠標移出圖片區(qū)域內(nèi)，自動播放繼續(xù)

lunbo.addEventListener("mouseout",function(){pic_time = setInterval(autobofang,1000); },false);

//后退箭頭點擊事件，圖片會跟著點擊事件不斷變化

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);

}

}

總結(jié)：

基本輪播效果已經(jīng)實現(xiàn)，后期需要做的事：是對代碼要進行精簡，封裝，提高運行效率。