JavaScript實現帶有子菜單和控件的slider輪播圖效果

來源：懂視網責編：小采時間：2020-11-27 22:26:34

JavaScript實現帶有子菜單和控件的slider輪播圖效果

JavaScript實現帶有子菜單和控件的slider輪播圖效果:大家或許做過（照片輪播）無限滾動圖片的項目，但是，如果使用普通的滾動，當到達最后一張時，便會滾動回第一張，這是一個非常不好的用戶體驗。下面通過本文給大家分享基于JavaScript實現帶有子菜單和控件的slider輪播圖效果，具體實現代碼如下所示：實現效

推薦度：

點擊下載本文 文檔為doc格式

導讀JavaScript實現帶有子菜單和控件的slider輪播圖效果:大家或許做過（照片輪播）無限滾動圖片的項目，但是，如果使用普通的滾動，當到達最后一張時，便會滾動回第一張，這是一個非常不好的用戶體驗。下面通過本文給大家分享基于JavaScript實現帶有子菜單和控件的slider輪播圖效果，具體實現代碼如下所示：實現效

大家或許做過（照片輪播）無限滾動圖片的項目，但是，如果使用普通的滾動，當到達最后一張時，便會滾動回第一張，這是一個非常不好的用戶體驗。下面通過本文給大家分享基于JavaScript實現帶有子菜單和控件的slider輪播圖效果，具體實現代碼如下所示：

實現效果：

實現原理：

// 步驟
// 1. 獲取事件源以及相關元素
// 2. 復制第一張圖片所在的li，添加到ul的最后面
// 3. 給ol添加li，ul中的個數-1個，并點亮第一個按鈕
// 4. 鼠標放到ol的li上切換圖片
// 5. 添加定時器
// 6. 左右切換圖片（鼠標放上去隱藏，移開顯示）

實現代碼：

<!DOCTYPE html>
<html>
<head>
 <title>輪播圖</title>
 <meta charset="utf-8">
 <style type="text/css">
 *{
 padding: 0;
 margin: 0;
 list-style: none;
 border: 0;
 }
 .all{
 width: 500px;
 height: 200px;
 padding: 7px;
 margin: 100px auto;
 position: relative;
 box-shadow: 1px 1px 5px #2d2d2d;
 }
 .screen{
 width: 500px;
 height: 200px;
 overflow: hidden;
 position: relative;
 }
 .screen li{
 width: 500px;
 height: 200px;
 overflow: hidden;
 float: left;
 }
 .screen ul{
 position: absolute;
 left: 0;
 top: 0;
 width: 3000px;
 }
 .all ol{
 position: absolute;
 right: 10px;
 bottom: 10px;
 line-height: 20px;
 text-align: center;
 }
 .all ol li{
 float: left;
 width: 20px;
 height: 20px;
 text-align: center;
 background-color: #fff;
 border: 1px solid #ccc;
 margin-left: 10px;
 cursor: pointer;
 }
 .all ol li.current{
 background-color: #03c03c;
 }
 #arr{
 display: none;
 }
 #arr span{
 width: 40px;
 height: 40px;
 left: 5px;
 top: 50%;
 position: absolute;
 margin-top: -20px;
 background-color: #000;
 cursor: pointer;
 line-height: 35px;
 text-align: center;
 font-weight: bold;
 font-family: "微軟雅黑";
 font-size: 30px;
 color: #fff;
 opacity: 0.3;
 border-radius: 50%;
 box-shadow: 1px 1px 3px #2d2d2d;
 }
 #arr #right{
 right: 5px;
 left: auto;
 }
 </style>
</head>
<body>
<div class="all" id="all">
 <div class="screen" id="screen">
 <ul id="ul">
 <li><img src="./images/01.jpg" width="500" height="200"></li>
 <li><img src="./images/02.jpg" width="500" height="200"></li>
 <li><img src="./images/03.jpg" width="500" height="200"></li>
 <li><img src="./images/04.jpg" width="500" height="200"></li>
 <li><img src="./images/05.jpg" width="500" height="200"></li>
 </ul>
 <!-- 圖片子菜單 -->
 <ol>
 </ol>
 <!-- 左右切換按鈕 -->
 <div id="arr">
 <span id="left"><</span>
 <span id="right">></span>
 </div>
 </div>
</div>
<!-- script -->
<script type="text/javascript">
 // 賦值第一張圖片放到ul的最后，當圖片切換到第五張的時候，直接切換第六張，再從第一張切換到第二張的時候先瞬間切換到第一張圖片，然后滑倒第二張
 // 步驟
 // 1. 獲取事件源以及相關元素
 // 2. 復制第一張圖片所在的li，添加到ul的最后面
 // 3. 給ol添加li，ul中的個數-1個，并點亮第一個按鈕
 // 4. 鼠標放到ol的li上切換圖片
 // 5. 添加定時器
 // 6. 左右切換圖片（鼠標放上去隱藏，移開顯示）
 // 1. 獲取事件源以及相關元素
 var all = document.getElementById("all");
 var screen = all.firstElementChild || all.firstChild;
 var imgWidth = screen.offsetWidth;
 var ul = screen.firstElementChild || screen.firstChild;
 var ol = screen.children[1];
 var div = screen.lastElementChild || screen.lastChild;
 var spanArr = div.children;
 // 2. 復制第一張圖片所在的li，添加到ul的最后面
 var ulNewLi = ul.children[0].cloneNode(true);
 ul.appendChild(ulNewLi);
 // 3. 給ol添加li，ul中的個數-1個，并點亮第一個按鈕
 for(var i=0; i<ul.children.length-1; i++){
 var olNewLi = document.createElement("li");
 olNewLi.innerHTML = i+1;
 ol.appendChild(olNewLi);
 } 
 var olLiArr = ol.children;
 olLiArr[0].className = "current";
 // 4. 鼠標放到ol的li上切換圖片
 for(var i=0; i<olLiArr.length; i++){
 // 自定義屬性，把索引值綁定到元素的index屬性上
 olLiArr[i].index = i;
 olLiArr[i].onmouseover = function(){
 // 排他思想
 for(var j=0; j<olLiArr.length; j++){
 olLiArr[j].className = "";
 }
 this.className = "current"
 // 鼠標放到小方塊上時，索引值和key以及square同步
 // key = this.index;
 // square = this.index;
 key = square = this.index;
 // 移動盒子
 animate(ul, -this.index*imgWidth);
 }
 }
 // 5. 添加定時器
 var timer = setInterval(autoPlay, 1000);
 // 固定向右切換圖片
 // 兩個定時器（一個記錄圖片，一個記錄子菜單欄）
 var key = 0;
 var square = 0;
 function autoPlay(){
 // 通過key的自增來模擬圖片的索引值，然后移動ul
 key++;
 if(key > olLiArr.length){
 // 圖片已經滑到最后一張，接下來應該跳轉到第一張，然后滑動到第二張
 ul.style.left = 0;
 key = 1;
 }
 animate(ul, -key*imgWidth);
 // 通過控制square的自增來模擬小方塊的索引值，然后點亮盒子
 // 排他思想做小方塊
 square++;
 if(square > olLiArr.length-1){
 // 索引值不能大于5，如果大于5則立即變為0；
 square = 0;
 }
 for(var i=0; i<olLiArr.length; i++){
 olLiArr[i].className = "";
 }
 olLiArr[square].className = "current";
 }
 // 鼠標放上去清除定時器，移開啟動定時器
 all.onmouseover = function(){
 div.style.display = "block";
 clearInterval(timer);
 }
 all.onmouseout = function(){
 div.style.display = "none";
 timer = setInterval(autoPlay,1000);
 }
 // 6. 左右切換圖片（鼠標放上去顯示，移開隱藏）
 spanArr[0].onclick = function(){
 // 通過控制key的自增來模擬圖片的索引值，然后移動ul
 key--;
 if(key<0){
 // 先移到最后一張，然后key的值取前一張的索引值，然后向前移動
 ul.style.left = -imgWidth*(olLiArr.length) + "px";
 key = olLiArr.length-1;
 }
 animate(ul, -key*imgWidth);
 // 通過控制square的自增來模擬小方塊的索引值，然后點亮小方塊
 square--;
 if(square<0){
 // 索引值不能大于等于5，如果為5，立即變為0
 square = olLiArr.length-1;
 }
 for(var i=0; i<olLiArr.length; i++){
 olLiArr[i].className = "";
 }
 olLiArr[square].className = "current";
 }
 spanArr[1].onclick = function(){
 // 右側的和定時器一模一樣
 autoPlay();
 }
 // 動畫封裝
 var absSpeed = 10; //設定步長
 function animate(ele, target){
 clearInterval(ele.timer);
 var speed = target > ele.offsetLeft ? absSpeed : -absSpeed;
 ele.timer = setInterval(function(){
 var val = target - ele.offsetLeft;
 ele.style.left = ele.offsetLeft + speed + "px";
 if(Math.abs(val) < Math.abs(speed)){
 ele.style.left = target + "px";
 clearInterval(ele.timer);
 }
 }, 10)
 }
</script>
</body>
</html>

總結

以上所述是小編給大家介紹的JavaScript實現帶有子菜單和控件的slider輪播圖效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com