原生js實現簡單輪播圖效果
阿新 • • 發佈:2021-09-03
本文例項為大家分享了 + element ui實現錨點定位的具體程式碼,供大家參考,具體內容如下
效果如下:
分析:
分析效果:
分析實現:
1、通過 document.querySelector('.類名') 的形式獲取到裝輪播圖的大盒子(.carousel)、裝輪播圖左右按鈕的標籤的父元素(.chevron)、獲取左右按鈕(.chevron-left 、.chevron-right)、獲取放輪播圖圖片的父元素ul(.carousel-body)【注:這裡獲取ul而不是回去li,是因為移動輪播圖的時候是整個ul一起移動的】、最後還要獲取裝輪播圖圖片的li(.indicators li)
//裝輪播圖的大盒子 let oCarousel = document.querySelector('.carousel') //裝輪播圖左右按鈕的標籤的父元素 let oChevron = document.querySelector('.chevron') //左按鈕 let oLeft = document.querySelector('.chevron-left') //右按鈕 let oRight = document.querySelector('.chevron-right') //獲取放輪播圖圖片的父元素ul let oUl = document.querySelector('.carousel-body') //獲取裝輪播圖圖片的li let oActives = document.querySelectorAll('.indicators li')
2、實現通過點選左右按鈕使輪播圖實現上一張、下一張的效果:
先封裝一個animation()函式,便於多次呼叫
function animation(obj,target){ // 清除定時器 clearInterval(obj.timer) obj.timer=setInterval(()=>{ // 讀取元素當前位置 let curX=obj.offsetLeft //定義一個步長 let step=10 // 判斷將要移動的方向(比較目標位置與當前位置的大小) if(target<curX){ step=-10 } // 根據當前位置與目標位置,以及步長的關係判斷 // 只要目標位置與當前位置之間的距離 < 步長,就直接將元素的位置設定為目標為位置即可 if(Math.abs(target-curX)<Math.abs(step)){ obj.style.left=target+'px' clearInterval(obj.timer) }else{ // 計算下一步的位置 let nextX=curX+step // 將下一步的位置賦值給obj.style.left obj.style.left=nextX+'px' } },10) }
①由於滑鼠移入輪播圖的時候前,輪播圖中的左右箭頭是隱藏的,當滑鼠移入時顯示;因此需要為裝輪播圖的大盒子(.carousel)繫結滑鼠移入(onmouseover)和滑鼠移出事件(onmouseout)
oCarousel.onmouseover = function () { oChevron.style.display = "block" } oCarousel.onmouseout = function () { oChevron.style.display = "none" }
②為左右按鈕繫結點選事件,定義一個計數器全域性變數n,代表輪播圖中圖片的位置,因為這裡一個li的大小為500px,所以設定一個全域性變數步長step為500(步長作為每次移動輪播圖中ul的距離)
let n = 0 let step = 500 oLeft.onclick = function () { n-- if (n == -1) { //當移到第一張(n=0),再次點選時(n=-1),將n設定為4,跳轉到最後一張圖片的位置 //裝輪播圖圖片的ul的位置改為最後一張圖片的位置(因為一張圖片width為500px,所以最後一張在5*500=2500的位置) oUl.style.left = -2500 + 'px' n = 4 } //target為移動距離,即:第n張圖片 * 每張圖片的width let target = -n * step animation(oUl,target) } oRight.onclick = function () { n++ if (n == 6) { //當移到第最後一張(n=5),再次點選時(n=6),將n設定為1,跳轉到第一張圖片的位置 oUl.style.left = 0 + 'px' n = 1 } let target = -n * step animation(oUl,target) }
3、通過點選下面的數字來實現輪播圖切換
//因為上面通過document.querySelectorAll('.indicators li') 獲取到的li是通過偽陣列的形式返回的,使用需要遍歷該偽陣列為每個li繫結點選事件 for (let i = 0; i < oActives.length; i++) { oActives[i].onclick = function () { //為被點選的第i個設定樣式為高亮 setActive(i) //並且把i的值賦值給n(相當於記錄當前應該顯示第i張圖片) n = i //設定移動的距離 let target = -n * step animation(oUl,target) } } // 封裝一個函式,實現li的高亮 function setActive(ind) { //使用排他思想:清除全部,然後在單獨設定類名 for (let j = 0; j < oActives.length; j++) { oActives[j].className = '' } oActives[inlxtSyZd].className = 'active' }
修改第2步中點選左右箭頭滑動輪播圖下面頁面高亮不變的情況
oLeft.onclick = function () { n-- if (n == -1) { oUl.stylxtSyZle.left = -2500 + 'px' n = 4 } //呼叫setActive()函式,修改第n張圖片頁碼的高亮狀態 setActive(n) let target = -n * step animation(oUl,target) } oRight.onclick = function () { n++ if (n == 6) { oUl.style.left = 0 + 'px' n = 1 } //如果n為5時,表示已經到了第6張圖片(而第六張圖片是和第1張一樣的,只是用來滑動過渡,防止瞬間跳轉的效果)所以需要設定頁碼為0(即第一張圖片)的高亮狀態 //這裡使用了三元表示式,如果n為5,則設定第1張圖片為高亮,否則設定第n張為高亮 n == 5 ? setActive(0) : setActive(n) let target = -n * step animation(oUl,target) }
4、設定定時器,在移入輪播圖時清除定時器,移出時開啟定時器(實現移入時停止自動播放,移出時開啟自動播放)
//在載入頁面時應該先開啟定時器,否則輪播圖不能自動播放,需要等待一次移入且移出事件才會開啟定時器 timer = setInterval(function () { //呼叫右側按鈕繫結的點選事件 oRight.onclick() },2000) //滑鼠移入時,顯示左右箭頭,並且清除定時器 oCarousel.onmouseover = function () { oChevron.style.display = "block" clearInterval(timer) } //滑鼠移出時,隱藏左右箭頭,並且開啟定時器 oCarousel.onmouseout = function () { oChevron.style.display = "none" timer = setInterval(function () { oRight.onclick() },2000) }
完整程式碼如下:
樣式如下:
* { margin: 0; padding: 0; } .carousel { width: 500px; height: 200px; border: 1px solid red; margin: 100px auto; position: relative; overflow: hidden; } .carousel li { list-style: none; } /* 輪播內容 */ .carousel-body { width: 3000px; height: 200px; position: absolute; } .carousel-body li { list-style: none; float: left; width: 500px; height: 200px; } .carousel-body li img { width: 100%; height: 100%; } /* 左右焦點按鈕 */ .carousel .chevron { position: absolute; top: 50%; height: 40px; width: 100%; transform: translateY(-50%); display: none; } .carousel .chevron-left,.carousel .chevron-right { width: 40px; height: 40px; background: #000; cursor: pointer; text-align: center; line-height: 40px; font-size: 30px; font-weight: bold; color: #fff; opacity: .3; border: 1px solid #fff; } .carousel .chevron-left { float: left; margin-left: 10px; } .carousel .chevron-right { float: right; margin-right: 10px; } /* 5.2 輪播指示器結構 */ .carousel .indicators { position: absolute; right: 30px; bottom: 20px; } .carousel .indicators li { float: left; width: 20px; height: 20px; margin-right: 10px; background: rgba(255,255,.8); text-align: center; line-height: 20px; cursor: pointer; color: rgba(0,.5); } .carousel .indicators li.active { background: #09f; color: red; }
HTML如下:
<div class="carousel"> <!-- 輪播內容 --> <ul class="carousel-body"> <li><a href="#"><img src="./images/1.jpg" alt="原生實現簡單輪播圖效果"></a></li> <li><a href="#"><img src="./images/2.jpg" alt="原生js實現簡單輪播圖效果"></a></li> <li><a href="#"><img src="./images/3.jpg" alt="原生js實現簡單輪播圖效果"></a></li> <li><a href="#"><img src="./images/4.jpg" alt="原生js實現簡單輪播圖效果"></a></li> <li><a href="#"><img src="./images/5.jpg" alt="原生js實現簡單輪播圖效果"></a></li> <li><a href="#"><img src="./images/1.jpg" alt="原生js實現簡單輪播圖效果"></a></li> <!-- a3.1 新增1個li與第1張相同 --> <!-- <li><a href="#"><img src="./images/1.jpg" alt="原生js實現簡單輪播圖效果"></a></li> --> </ul> <!-- 左右焦點按鈕 --> <div class="chevron"> <div class="chevron-left">«</div> <div class="chevron-right">»</div> </div> <!-- 5.1 輪播指示器結構 --> <ol class="indicators"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div>
js如下:
let oCarousel = document.querySelector('.carousel') let oChevron = document.querySelector('.chevron') let oLeft = document.querySelector('.chevron-left') let oRight = document.querySelector('.chevron-right') let oUl = document.querySelector('.carousel-body') let oActives = document.querySelectorAll('.indicators li') let n = 0 let step = 500 let timer timer = setInterval(function () { oRight.onclick() },2000) oCarousel.onmouseover = function () { oChevron.style.display = "block" clearInterval(timer) } oCarousel.onmouseout = function () { oChevron.style.display = "none" timer = setInterval(function () { oRight.onclick() },2000) } oLeft.onclick = function () { n-- if (n == -1) { oUl.style.left = -2500 + 'px' n = 4 } setActive(n) let target = -n * step animation(oUl,target) } oRight.onclick = function () { n++ if (n == 6) { oUl.style.left = 0 + 'px' n = 1 } n == 5 ? setActive(0) : setActive(n) let target = -n * step animation(oUl,target) } for (let i = 0; i < oActives.length; i++) { oActives[i].onclick = function () { setActive(i) n = i let target = -n * step animation(oUl,target) } } // 封裝一個函式,實現li的高亮 function setActive(ind) { for (let j = 0; j < oActives.length; j++) { oActives[j].className = '' } oActives[ind].className = 'active' } function animation(obj,target){ // 清除定時器 clearInterval(obj.timer) obj.timer=setInterval(()=>{ // 讀取元素當前位置 let curX=obj.offsetLeft //定義一個步長 let step=10 // 判斷將要移動的方向(比較目標位置與當前位置的大小) if(target<curX){ step=-10 } // 根據當前位置與目標位置,以及步長的關係判斷 // 只要目標位置與當前位置之間的距離 < 步長,就直接將元素的位置設定為目標為位置即可 if(Math.abs(target-curX)<Math.abs(step)){ obj.style.left=target+'px' clearInterval(obj.timer) }else{ // 計算下一步的位置 let nextX=curX+step // 將下一步的位置賦值給obj.style.left obj.style.left=nextX+'px' } },10) }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。