DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 用JS實現圖片輪播效果代碼(一)
用JS實現圖片輪播效果代碼(一)
編輯:關於JavaScript     

一.實現原理

(1)將所有圖片放在一個父容器div裡面,通過display屬性來設置圖片的出現與隱藏;

(2)輪播圖分為手動輪播和自動輪播;

手動輪播的重點是每次點擊圖片下方的小圓圈,獲得它的索引號,並讓與之對應索引號的圖片顯示,並且此時的小圓圈為高亮顯示;
自動輪播:利用定時器setInterval(),來每隔一定的時間來播放一次圖片。

(3)所有的基礎知識:dom操作,定時器,事件運用。

二.輪播圖頁面布局:

<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>
<!-- 圖片左右方來回滾動圖片的左右箭頭-->
<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實現代碼:

window.onload = function(){
//輪播初始化
var lunbo = document.getElementById('content');
var imgs = lunbo.getElementsByTagName('img'); 
var uls = lunbo.getElementsByTagName('ul');
var lis = lunbo.getElementsByTagName('li');
//初始狀態下,一個圓圈為高亮模式
lis[0].style.fontSize = '26px';
lis[0].style.color = '#fff';
//定義一個全局變量,用來進行自動輪播圖片順序的變化
var pic_index = 1;
//自動輪播.使用pic_time記錄播放,可以隨時使用clearInterval()清除掉。
var pic_time = setInterval(autobofang,3000);
//手動輪播
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); 
} 
}
} 
//圖片切換函數
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'; 
}
//自動播放的事件處理
function autobofang(){
if(pic_index >= lis.length){
pic_index = 0;
}
change1(pic_index);
pic_index++;
}
//自動播放的圖片轉化中的事件
function change1(index){ 
picChange(index);
//鼠標移入ul標簽,自動播放圖片暫停
uls[0].addEventListener("mouseover",pause,false);
//鼠標移出ul標簽,自動播放圖片繼續
uls[0].addEventListener("mouseout",go,false);
}
//自動播放暫停函數
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;
}
}
//自動播放圖片繼續函數
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;
}
}
}

五.效果圖:

六.遇到的問題與不足

問題:當鼠標第一次移入ul標簽時,自動輪播圖片停止,鼠標移出,自動輪播繼續,但是隨著運行,輪播圖片的變化速度越來越快,而且這時點擊ul標簽已經不起作用了。

問題原因:在後面停止輪播後再次輪播開始使用定時器的時候,沒有給賦值給pic_time來記錄,也就沒有再次鼠標移到ul標簽而清除定時器,因此導致再次點擊ul標簽不能暫停自動輪播播放,而且速度 越來越快。
不足:沒有實現類似淘寶輪播圖那樣平滑過渡的無現滾動的效果,左右箭頭的指示作用也沒有完成。這些在後期會繼續學習,繼續來完善,來分享.

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved