實現
實現如圖所示的輪播圖，要實現的功能主要有：
- 鼠標經過輪播圖模塊，左右按鈕顯示，離開隱藏左右按鈕。
- 點擊右側按鈕一次，圖片下滑一張；點擊左側按鈕，圖片上滑一張。
- 圖片播放的同時，下面小圓圈模塊跟隨一起變化。
- 點擊小圓圈，可以播放相應圖片。
- 鼠標不經過輪播圖，輪播圖也會自動播放。
- 鼠標經過，輪播圖模塊自動播放停止。
分析
首先我們應該建立一個底層盒子，里面放置圖片、左右按鈕和小圓圈，html 部分如下：
<body> <!--底層的盒子--> <div class="focus"> <!--核心的圖片區域--> <ul>
//默認第一張圖片顯示 <li class="active"> <img src="img/one.jpg" alt=""> <!--圖片上的文字--> <div class="content"> <h2>西亭別序</h2> <p>行到水窮處，坐看雲起時</p> </div> </li> <li> <img src="img/two.jpg" alt=""> <div class="content"> <h2>蘇軾</h2> <p>竹杖芒鞋輕勝馬，一蓑煙雨任平生</p> <p>他人笑我太瘋癲，我笑他人看不穿</p> </div> </li> <li> <img src="img/three.png" alt=""> <div class="content"> <h2>白鶴西去</h2> <p>為伊消得人憔悴</p> </div> </li> <li> <img src="img/four.png" alt=""> <div class="content"> <h2>白鶴西去</h2> <p>為伊消得人憔悴</p> </div> </li> </ul> <!--左側按鈕--> <a href="#" class="arrow-l" id="left"><</a> <!--右側按鈕--> <a href="#" class="arrow-r" id="right">></a> <!--小圓圈：根據圖片數量動態添加--> <ol class="circle"> </ol> </div> </body>
注意設置父盒子 focus 定位為 relative,存放圖片的子盒子 li 定位為 absolute 使圖片堆疊在一起。其它 css 的樣式布局就不具體講解了，后面會補充詳細代碼。
js 思想實現
此款輪播圖的核心思想主要是使用 z-index 來設置圖片的堆疊順序來顯示圖片的，z-index 的值高則在最上層被顯示，值底則被值高的遮擋起來不被顯示。接下來我們來看一下 js 的具體功能實現。
功能 1：鼠標經過輪播圖模塊，左右按鈕顯示，離開隱藏左右按鈕。
window.addEventListener('load',function (){
//1、獲取元素
var arrow_l = document.querySelector('.arrow-l');//左按鈕
var arrow_r = document.querySelector('.arrow-r');//右按鈕
var focus = document.querySelector('.focus');//放置輪播圖的底層盒子
//2、鼠標經過底層盒子時，就顯示隱藏的左右按鈕
focus.addEventListener('mouseenter',function (){
arrow_l.style.display = 'block';
arrow_r.style.display = 'block';
})
//鼠標離開底層盒子時，就隱藏左右按鈕
focus.addEventListener('mouseleave',function (){
arrow_l.style.display = 'none';
arrow_r.style.display = 'none';
})
//...后續的功能代碼都是放在此監聽事件里面，就單獨說明了
}）
功能 2：點擊右側按鈕一次，圖片下滑一張；點擊左側按鈕，圖片上滑一張。
//1、獲取元素 var ul = focus.querySelector('ul');//圖片的ul var ol = focus.querySelector('ol');//小圓圈的ol var goleft = document.getElementById('left'); //左按鈕 var goright = document.getElementById('right');//右按鈕 var index = 0;//index表示第幾張圖片在展示，給他添加樣式.active //2、排他思想：去掉所有元素的樣式，只留下第 index 圖片的樣式 var goIndex = function (index){ //左右按鈕的 for(var i = 0;i < ul.children.length;i++){ ul.children[i].className = ''; } ul.children[index].className = 'active'; //下面小圓圈的 for(var i = 0;i < ol.children.length;i++){ ol.children[i].className = ''; } ol.children[index].className = 'current'; } //3、右按鈕：下一張 var goNext = function (){ //注意此處 index 的初值是0，所以比較長度要減1，點到最后一張圖片時，返回第一張 if (index < ul.children.length-1){ index ++; }else{ index = 0; } //確認 index 后設置樣式顯示圖片 goIndex(index); } //4、左按鈕：上一張 var preNext = function (){ //注意此處index=0點到第一張圖片，再點擊返回最后一張 if (index === 0){ index = ul.children.length-1 }else{ index --; } //確認 index 后設置樣式顯示圖片 goIndex(index); } //5、分別給左右按鈕添加點擊事件 goleft.addEventListener('click',function (){ preNext(); }) goright.addEventListener('click',function (){ goNext(); })
功能 3：動態生成小圓圈，點擊圓圈出現對應圖片，並且圓圈變成圓球
//3、動態生成小圓圈，有幾張圖片，就生成幾個小圓圈 for(var i = 0;i < ul.children.length;i++){ //創建一個小li var li = document.createElement('li'); //為每個小圓圈添加索引值 li.setAttribute('index',i); //把li插到ol里面 ol.appendChild(li); //4、我們可以直接在生成的小圓圈的同時直接綁定點擊事件 li.addEventListener('click',function (){ //5、點擊圓圈出現對應圖片 //獲取當前被點擊小圓圈的索引值 var point = this.getAttribute('index'); //調用上面排他思想的函數 goIndex(point); }) } //默認把ol里面的第一個小li設置類名為 current ol.children[0].className = 'current';
功能 4：鼠標不經過輪播圖，輪播圖也會自動播放。圖片播放的同時，下面小圓圈模塊跟隨一起變化。
//自動輪播 var self = setInterval(function (){ goIndex(index); if (index < ul.children.length-1){ index ++; }else{ index = 0; } },1000)
功能 5：鼠標經過，輪播圖模塊自動播放停止。離開時又自動播放。（只需要在上面的底層盒子的鼠標經過事件中添加清除定時器就可以）
//2、鼠標經過底層盒子時，就顯示隱藏的左右按鈕 focus.addEventListener('mouseenter',function (){ //... //7、鼠標經過，輪播圖模塊自動播放停止。 clearTimeout(selfTimer); selfTimer = null;//清除定時器變量，釋放內存 }) //鼠標離開底層盒子時，就隱藏左右按鈕 focus.addEventListener('mouseleave',function (){ //... //7、鼠標離開時又自動播放 selfTimer = setInterval(function (){ goIndex(index); if (index < ul.children.length-1){ index ++; }else{ index = 0; } },1000) })
好了，到此輪播圖的全部功能就已經實現了，當然這只是實現輪播圖的其中一種方式，還有其它很多方法那就等着你們自己去探索了。接下來粘貼一些樣式代碼
附錄
<style> * { margin:0; padding:0; } body{ background-color: rgba(50, 128, 102, 0.9); } .focus { position: relative; margin: 20px auto; width: 800px; height: 400px; } .focus ul { position:relative; width: 800px; height: 400px; } .focus ul li { position: absolute; width: 100%; height: 100%; opacity: 1; transition: all .5s; } .focus ul li img { width: 100%; height: 100%; } .focus ul li .content { position: absolute; bottom: 40px; left: 300px; text-align: center; color: white; } .focus ul li .content h2 { margin-bottom: 5px; } .focus ul li .content p { font-size: 14px; } .arrow-l,.arrow-r { display: none; position: absolute; top: 170px; /*margin-top: -20%;*/ width: 24px; height: 40px; background: rgba(0,0,0,.3); text-align: center; line-height: 40px; color: #fff; font-size: 18px; /*左右按鈕一直顯示*/ z-index: 100; } .arrow-r { right: 0; } .circle { position: absolute; bottom: 5px; left: 350px; list-style:none; /*圓圈一直顯示*/ z-index: 100; } .circle li { float: left; width: 8px; height: 8px; border: 2px solid rgba(255,255,255,0.5); margin: 0 3px; border-radius: 50%; /*鼠標經過顯示小手*/ cursor: pointer; } .current { background-color: #fff; } /*給圖片動態添加的堆疊順序*/ .active { opacity: 1; z-index: 10; } </style>