如何用javascript實現圖片輪播效果
先上實現的效果圖：
其中包括三種輪播效果，（有序，無序，上一頁下一頁）
以下是我的實現代碼，大家有更好的實現方式，可以給我留言，讓我學習下。
// An highlighted block
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style type="text/css">
#header{
width:500px;
height:313px;
background-color:#FF9;
margin:10px auto;
border:solid 5px red;
}
.logoHidden{
display:none;
}
.logoShow{
display:block;
}
.sort{
width:210px;
height:24px;
position:relative;
top:-70px;
left:20px;
z-index:2;
}
.num{
width:40px;
height:20px;
float:left;
background-color:orange;
opacity:0.5;
margin-left:10px;
margin-top:2px;
text-align:center;
color:white;
border:solid 1px #FF6;
}
#s01{
width:210px;
height:24px;
position:relative;
top:-65px;
left:137px;
}
.btn{
width:40px;
height:6px;
background-color:#999;
float:left;
margin-left: 10px;
border-radius: 5px;
opacity:0.5;
}
.clickbtn{
width:50px;
height:313px;
background-color:#999;
opacity:0.3;
font-size:76px;
color:white;
line-height:313px;
}
.clickbtn a{
text-decoration:none;
color:white;
}
#left{
position:relative;
top:-361px;
}
#right{
position:relative;
top:-676px;
left:452px;
}
</style>
</head>
<body onLoad="play()">
<div id="header">
<img id="img0" src="img/a.jpg" width="500" height="313" class="logoShow" />
<img id="img1" src="img/b.jpg" width="500" height="313" class="logoHidden" />
<img id="img2" src="img/c.jpg" width="500" height="313" class="logoHidden" />
<img id="img3" src="img/d.jpg" width="500" height="313" class="logoHidden" />
<div class="sort" id="s00">
<div class="num" id="s1" onMouseOver="play(0)" onMouseOut="restartInterval()">1</div>
<div class="num" id="s2" onMouseOver="play(1)" onMouseOut="restartInterval()">2</div>
<div class="num" id="s3" onMouseOver="play(2)" onMouseOut="restartInterval()">3</div>
<div class="num" id="s4" onMouseOver="play(3)" onMouseOut="restartInterval()">4</div>
</div>
<div id="s01">
<div class="btn" id="s1" onMouseOver="play(0)" onMouseOut="restartInterval()"></div>
<div class="btn" id="s2" onMouseOver="play(1)" onMouseOut="restartInterval()"></div>
<div class="btn" id="s3" onMouseOver="play(2)" onMouseOut="restartInterval()"></div>
<div class="btn" id="s4" onMouseOver="play(3)" onMouseOut="restartInterval()"></div>
</div>
<div id="left" class="clickbtn"><a href="javascript:preOrnext(0)"><</a></div>
<div id="right" class="clickbtn"><a href="javascript:preOrnext(1)">></a></div>
</div>
</body>
<script type="text/javascript">
//定義序號
var i = 0;
//獲取圖片數組
var imgs = document.getElementsByTagName("img");
//獲取數字數組
var nums = document.getElementsByClassName("num");
//獲取按鈕數組
var btns = document.getElementsByClassName("btn");
//獲取setInterval的返回值
var intervalId = null;
//圖片輪播功能實現
function play(num){
//如何num不是未定義，即傳入了num。指定顯示第num張圖片.
if(typeof(num)!="undefined"){
i = num;
clearInterval(intervalId);//停止計時器
}
//如果已經播放到最後一張圖片，則序號i歸零。即再從第一張圖片開始播放。
if(i==imgs.length){
i = 0;
}
//顯示第i張圖片，隱藏其他圖片。同時，修改第i個數字/按鈕的背景爲橙色，其他爲灰色。
for(j=0;j<imgs.length;j++){
if(i==j){
imgs[j].className = "logoShow";
nums[j].style.backgroundColor = "orange";
btns[j].style.backgroundColor = "orange";
}else{
imgs[j].className = "logoHidden";
nums[j].style.backgroundColor = "gray";
btns[j].style.backgroundColor = "gray";
}
}
/*
以下是把所有的圖片隱藏，所有的數字背景改爲灰色，所有的按鈕背景改爲灰色。
var j=0;
while(j<imgs.length){
imgs[j].className = "logoHidden";
nums[j].style.backgroundColor = "gray";
btns[j].style.backgroundColor = "gray";
j++;
}
*/
/*
讓第i張圖片顯示，第i個數字改變背景色，第i個按鈕改變背景色。
var k=0;
while(k<imgs.length){
if(i==k){
imgs[k].className = "logoShow";
nums[k].style.backgroundColor = "orange";
btns[k].style.backgroundColor = "orange";
}
k++;
}
*/
i++;
}
intervalId = setInterval("play()",1000);
//重置計時器
function restartInterval(){
intervalId = setInterval("play()",1000);
}
function preOrnext(flag){
clearInterval(intervalId);//停止計時器
if(flag==0){
i--;
i--;//因爲調用的play方法中，i++了，所以這裏兩次--。也可以把play中的i++註釋掉，這裏只用一個i--即可。
alert(i);
if(i==-1){
i=3;
}
}else{
i++;
if(i==4){
i=0;
}
}
play(i);
}
</script>
</html>