這篇文章主要介紹了用JS實(shí)現(xiàn)圖片輪播效果代碼（一）的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

一.實(shí)現(xiàn)原理

（1）將所有圖片放在一個(gè)父容器div里面，通過display屬性來設(shè)置圖片的出現(xiàn)與隱藏；

（2）輪播圖分為手動(dòng)輪播和自動(dòng)輪播；

手動(dòng)輪播的重點(diǎn)是每次點(diǎn)擊圖片下方的小圓圈，獲得它的索引號(hào)，并讓與之對(duì)應(yīng)索引號(hào)的圖片顯示，并且此時(shí)的小圓圈為高亮顯示；

自動(dòng)輪播：利用定時(shí)器setInterval()，來每隔一定的時(shí)間來播放一次圖片。

（3）所有的基礎(chǔ)知識(shí)：dom操作，定時(shí)器，事件運(yùn)用。

二.輪播圖頁(yè)面布局：

<div id="content"> <!-- 總的父容器 -->

<div class="carousel-inner"> <!-- 包含圖片的容器 -->

<div class="item "><img src="./img/lunbo1.jpg" alt="第一張圖片"></div>

<div class="item"><img src="./img/lunbo2.jpg" alt="第二張圖片"></div>

<div class="item"><img src="./img/lunbo3.jpg" alt="第三張圖片"></div>

</div>

<!-- 圖片下方的指示圓圈-->

<ul class="carousel-indicators">

<li id='pic1'>●</li>

<li id='pic2'>●</li>

<li id='pic3'>●</li>

</ul>

<!-- 圖片左右方來回滾動(dòng)圖片的左右箭頭-->

<a href="#" class="carousel-control prev"><span><</span></a>

<a href="#" class="carousel-control next"><span>></span></a>

</div>

三.輪播圖的css樣式：

#content{

width: 100%;

height:500px;

position: relative;

}

.carousel-inner{

position: relative;

width: 100%;

overflow: hidden;

height:500px;

}

.carousel-inner>.item>img{

display: block;

line-height: 1;

z-index: 1;

}

.carousel-indicators{

position: absolute;

bottom:10px;

left:45%;

z-index: 2;

list-style-type: none;

}

.carousel-indicators li{

display:inline-block;

padding: 0 15px;

font-size: 24px;

color:#999;

cursor: pointer;

z-index: 2;

}

.active1{

font-size: 28px;

color:#fff;

}

.carousel-control{

position: absolute;

text-decoration:none;

color: #999;

font-weight: bold;

opacity: .5;

font-size: 40px;

z-index: 3;

}

.carousel-control:hover{

color:fff;

text-decoration: none;

opacity: .9;

outline: none;

font-size: 42px;

}

.prev{

top: 30%;

left:20px;

}

.next{

top:30%;

right: 20px;

}

四.輪播圖的js實(shí)現(xiàn)代碼：

window.onload = function(){

//輪播初始化

var lunbo = document.getElementById('content');

var imgs = lunbo.getElementsByTagName('img');

var uls = lunbo.getElementsByTagName('ul');

var lis = lunbo.getElementsByTagName('li');

//初始狀態(tài)下，一個(gè)圓圈為高亮模式

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

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

//定義一個(gè)全局變量，用來進(jìn)行自動(dòng)輪播圖片順序的變化

var pic_index = 1;

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

var pic_time = setInterval(autobofang,3000);

//手動(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)播放的事件處理

function autobofang(){

if(pic_index >= lis.length){

pic_index = 0;

}

change1(pic_index);

pic_index++;

}

//自動(dòng)播放的圖片轉(zhuǎn)化中的事件

function change1(index){

picChange(index);

//鼠標(biāo)移入ul標(biāo)簽，自動(dòng)播放圖片暫停

uls[0].addEventListener("mouseover",pause,false);

//鼠標(biāo)移出ul標(biāo)簽，自動(dòng)播放圖片繼續(xù)

uls[0].addEventListener("mouseout",go,false);

}

//自動(dòng)播放暫停函數(shù)

function pause(event){

var event=event||window.event;

var target=event.target||event.srcElement;

switch(target.id){

case "pic1":

clearInterval(pic_time);

break;

case "pic2":

clearInterval(pic_time);

break;

case "pic3":

clearInterval(pic_time);

break;

}

}

//自動(dòng)播放圖片繼續(xù)函數(shù)

function go(event){

var event=event||window.event;

var target=event.target||event.srcElement;

switch(target.id){

case "pic1":

pic_index = 1;

pic_time = setInterval(autobofang,3000);

break;

case "pic2":

pic_index = 2;

pic_time = setInterval(autobofang,3000);

break;

case "pic3":

pic_index = 3;

pic_time = setInterval(autobofang,3000);

break;

}

}

}

六.遇到的問題與不足

問題：當(dāng)鼠標(biāo)第一次移入ul標(biāo)簽時(shí)，自動(dòng)輪播圖片停止，鼠標(biāo)移出，自動(dòng)輪播繼續(xù)，但是隨著運(yùn)行，輪播圖片的變化速度越來越快，而且這時(shí)點(diǎn)擊ul標(biāo)簽已經(jīng)不起作用了。

問題原因：在后面停止輪播后再次輪播開始使用定時(shí)器的時(shí)候，沒有給賦值給pic_time來記錄，也就沒有再次鼠標(biāo)移到ul標(biāo)簽而清除定時(shí)器，因此導(dǎo)致再次點(diǎn)擊ul標(biāo)簽不能暫停自動(dòng)輪播播放，而且速度 越來越快。

不足：沒有實(shí)現(xiàn)類似淘寶輪播圖那樣平滑過渡的無現(xiàn)滾動(dòng)的效果，左右箭頭的指示作用也沒有完成。這些在后期會(huì)繼續(xù)學(xué)習(xí)，繼續(xù)來完善，來分享.