這篇文章主要介紹了用JS實(shí)現(xiàn)圖片輪播效果代碼（一）的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
一.實(shí)現(xiàn)原理
（1）將所有圖片放在一個(gè)父容器div里面，通過(guò)display屬性來(lái)設(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()，來(lái)每隔一定的時(shí)間來(lái)播放一次圖片。
（3）所有的基礎(chǔ)知識(shí)：dom操作，定時(shí)器，事件運(yùn)用。
二.輪播圖頁(yè)面布局：
<div id="content"> <!-- 總的父容器 -->
<div> <!-- 包含圖片的容器 -->
<div><img src="./img/lunbo1.jpg"></div>
<div><img src="./img/lunbo2.jpg"></div>
<div><img src="./img/lunbo3.jpg"></div>
</div>
<!-- 圖片下方的指示圓圈-->
<ul>
<li id='pic1'>●</li>
<li id='pic2'>●</li>
<li id='pic3'>●</li>
</ul>
<!-- 圖片左右方來(lái)回滾動(dòng)圖片的左右箭頭-->
<a href="#"><span><</span></a>
<a href="#"><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è)全局變量，用來(lái)進(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;
}
}
}
六.遇到的問(wèn)題與不足
問(wèn)題：當(dāng)鼠標(biāo)第一次移入ul標(biāo)簽時(shí)，自動(dòng)輪播圖片停止，鼠標(biāo)移出，自動(dòng)輪播繼續(xù)，但是隨著運(yùn)行，輪播圖片的變化速度越來(lái)越快，而且這時(shí)點(diǎn)擊ul標(biāo)簽已經(jīng)不起作用了。
問(wèn)題原因：在后面停止輪播后再次輪播開(kāi)始使用定時(shí)器的時(shí)候，沒(méi)有給賦值給pic_time來(lái)記錄，也就沒(méi)有再次鼠標(biāo)移到ul標(biāo)簽而清除定時(shí)器，因此導(dǎo)致再次點(diǎn)擊ul標(biāo)簽不能暫停自動(dòng)輪播播放，而且速度 越來(lái)越快。
不足：沒(méi)有實(shí)現(xiàn)類似淘寶輪播圖那樣平滑過(guò)渡的無(wú)現(xiàn)滾動(dòng)的效果，左右箭頭的指示作用也沒(méi)有完成。這些在后期會(huì)繼續(xù)學(xué)習(xí)，繼續(xù)來(lái)完善，來(lái)分享.