剛開始學JavaScript時候很多新手都會嘗試寫一些簡單的小項目，輪播圖應該是寫的最多的。但是很多時候對於基礎不是很好的新手，雖然參照別人的代碼能寫出來一些輪播圖，但其中的一些細節和過程可能還是一知半解甚至不懂，我作為一個新手剛剛寫了幾種常見的輪播圖，里面的各種細節也花了不少時間弄懂，這里為大家介紹一種簡單易懂且很完善的輪播圖寫法。里面的細節我會一一詳細說明，希望和各位初入JavaScript的小伙伴一起進步。
輪播圖的思路其實很簡單：就是用JavaScript來控制輪播的圖片的樣式，可以控制display：none or block 可以控制opacity：‘0’ or ‘1’ 也可以通過z-index來控制圖片的擺放順序。(注意：這里的圖片一般是通過絕對定位放在一個div盒子里面，圖片堆疊在一起)。思路很清晰，那么我們就來看看代碼(代碼是本人自己手寫的)。具體細節我會在代碼中一一解釋：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#main{
width: 730px;
height: 454px;
margin: 100px auto;
position: relative;
}
#main .scollimg{
width: 730px;
height: 454px;
position: relative;
}
#main .scollimg img{
position: absolute;
top: 0;
left: 0;
}
#main .btn{
width: 730px;
height: 220px;
position: absolute;
top:117px;
left: 0;
}
#main .btn>div{
width: 100px;
height: 220px;
background: #fff;
opacity: 0;
}
#main .btn：hover>div{
opacity: 0.35;
}
#main .btn #btnleft{
position: absolute;
top: 0;
left: 0;
}
#main .btn #btnright{
position: absolute;
top: 0;
right:0;
}
/*左右button里的三角形*/
.triangle{
margin-top: 50px;
width: 0;
height: 0;
border-width:70px 40px;
border-style: solid;
}
#main .btn #btnleft .triangle{
border-color: transparent #ccc transparent transparent;
}
#main .btn #btnright .triangle{
margin-left: 20px;
border-color: transparent transparent transparent #ccc;
}
#main .item{
position: absolute;
bottom: 30px;
left: 70px;
width: 200px;
height: 16px;
}
#main .item span{
width: 16px;
height: 16px;
background: #ccc;
display: inline-block;
border-radius: 50%;
}
#main .item span:hover{
cursor: pointer;
}
</style>
</head>
<body>
<div id="main">
<div class="scollimg">
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
</div>
<div class="btn">
<div id="btnleft"><div class="triangle"></div></div>
<div id="btnright"><div class="triangle"></div></div>
</div>
<div class="item">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script type="text/javascript">
window.onload=function(){
autoMove('img','span');
}
//輪播圖函數
function autoMove(tagImg,tagSpan){
var imgs=document.getElementsByTagName(tagImg);
var spans=document.getElementsByTagName(tagSpan);
//每次輪播后樣式
/*輪播到哪個位置，就對哪個位置的圖片樣式進行設置，首先讓所有的圖片樣式opacity變為0，然后對移動到的位置的樣式進行設置opacity為1*/
function InitMove(index){
for(var i=0;i<imgs.length;i++){
imgs[i].style.opacity='0';
spans[i].style.background='#ccc';
}
imgs[index].style.opacity='1';
spans[index].style.background='red';
}
//第一次初始化
InitMove(0);
//輪播過程的變換函數
/*前面已經初始化了圖片最開始看到的效果，接着輪播的話會隱藏第一張出現第二張
*這里count從1開始（圖片的初始化位置是count為0的情況），count=1執行一次Init*Move(count),使第一張隱藏第二張出現，依次執行。當count==imgs.leghth時由於*圖片最后一張的位置是imgs.length-1,所以此時把count置為0；相當於輪播圖輪回
*依次重新開始。
*/
var count=1;
function fMove(){
if(count==imgs.length){
count=0;
}
InitMove(count);
count++;
}
//設置自動輪播定時器；
var scollMove=setInterval(fMove,2500);
//點擊移動圖片；
/*這里就是點擊左右移動的button來讓圖片根據用戶的點擊左右移動；需要注意一點就*是每次點擊左移動或右移動需要首先清除定時器，等移動完了在重新添加定時器不然的*話你點擊移動后圖片雖然該變了，但是由於定時器還沒移動到這張圖片上面，所以就需*要等待定時器移動到你移動到的那張圖片上面讓后才開始定時輪播。比如如果你從開始
*就點擊移動圖片，一直移動到最后一張那么你就要等待兩個定時器的時間才能看到自動*輪播。
*/
var btnleft=document.getElementById('btnleft');
var btnright=document.getElementById('btnright');
btnleft.onclick=function(){
clearInterval(scollMove);
if(count==0){
count=imgs.length;
}
count--;
InitMove(count);
scollMove=setInterval(fMove,2500);
};
btnright.onclick=function(){
clearInterval(scollMove);
fMove();
scollMove=setInterval(fMove,2500);
}
}
</script>
</body>
</html>
這就是最基本的輪播圖，效果基本沒有什么問題。通用性強。
最終效果：