原生js實現(xiàn)簡單輪播圖效果
更新時間：2021年09月03日 16:28:49 作者：凌小峰
這篇文章主要為大家詳細介紹了原生js實現(xiàn)簡單輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)簡單輪播圖效果的具體代碼，供大家參考，具體內(nèi)容如下
效果如下：
分析：
分析效果：
分析實現(xiàn)：
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、實現(xiàn)通過點擊左右按鈕使輪播圖實現(xiàn)上一張、下一張的效果：
先封裝一個animation()函數(shù)，便于多次調(diào)用
function animation(obj,target){
// 清除定時器
clearInterval(obj.timer)
obj.timer=setInterval(()=>{
// 讀取元素當前位置
let curX=obj.offsetLeft
//定義一個步長
let step=10
// 判斷將要移動的方向(比較目標位置與當前位置的大小)
if(target<curX){
step=-10
}
// 根據(jù)當前位置與目標位置，以及步長的關系判斷
// 只要目標位置與當前位置之間的距離 < 步長，就直接將元素的位置設置為目標為位置即可
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"
}
②為左右按鈕綁定點擊事件，定義一個計數(shù)器全局變量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，跳轉(zhuǎn)到最后一張圖片的位置
//裝輪播圖圖片的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，跳轉(zhuǎn)到第一張圖片的位置
oUl.style.left = 0 + 'px'
n = 1
}
let target = -n * step
animation(oUl, target)
}
3、通過點擊下面的數(shù)字來實現(xiàn)輪播圖切換
//因為上面通過document.querySelectorAll('.indicators li') 獲取到的li是通過偽數(shù)組的形式返回的，使用需要遍歷該偽數(shù)組為每個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)
}
}
// 封裝一個函數(shù)，實現(xiàn)li的高亮
function setActive(ind) {
//使用排他思想：清除全部，然后在單獨設置類名
for (let j = 0; j < oActives.length; j++) {
oActives[j].className = ''
}
oActives[ind].className = 'active'
}
修改第2步中點擊左右箭頭滑動輪播圖下面頁面高亮不變的情況
oLeft.onclick = function () {
n--
if (n == -1) {
oUl.style.left = -2500 + 'px'
n = 4
}
//調(diào)用setActive()函數(shù)，修改第n張圖片頁碼的高亮狀態(tài)
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時，表示已經(jīng)到了第6張圖片（而第六張圖片是和第1張一樣的，只是用來滑動過渡，防止瞬間跳轉(zhuǎn)的效果）所以需要設置頁碼為0（即第一張圖片）的高亮狀態(tài)
//這里使用了三元表達式，如果n為5，則設置第1張圖片為高亮，否則設置第n張為高亮
n == 5 ? setActive(0) : setActive(n)
let target = -n * step
animation(oUl, target)
}
4、設置定時器，在移入輪播圖時清除定時器，移出時開啟定時器（實現(xiàn)移入時停止自動播放，移出時開啟自動播放）
//在加載頁面時應該先開啟定時器，否則輪播圖不能自動播放，需要等待一次移入且移出事件才會開啟定時器
timer = setInterval(function () {
//調(diào)用右側(cè)按鈕綁定的點擊事件
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)
}
完整代碼如下：
CSS樣式如下：
* {
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;
}
/* 輪播內(nèi)容 */
.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, 255, .8);
text-align: center;
line-height: 20px;
cursor: pointer;
color: rgba(0, 0, 0, .5);
}
.carousel .indicators li.active {
background: #09f;
color: red;
}
HTML如下：
<div class="carousel">
<!-- 輪播內(nèi)容 -->
<ul class="carousel-body">
<li><a href="#"><img src="./images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/3.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/4.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/5.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/1.jpg" alt=""></a></li>
<!-- a3.1 新增1個li與第1張相同 -->
<!-- <li><a href="#"><img src="./images/1.jpg" alt=""></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)
}
}
// 封裝一個函數(shù)，實現(xiàn)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
}
// 根據(jù)當前位置與目標位置，以及步長的關系判斷
// 只要目標位置與當前位置之間的距離 < 步長，就直接將元素的位置設置為目標為位置即可
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)
}
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了JavaScript的垃圾回收機制與內(nèi)存管理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-08-08
下面小編就為大家?guī)硪黄拗浦荒茌斎霐?shù)字的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-05-05
下面小編就為大家?guī)硪黄猳nclick和onblur沖突問題的快速解決方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考2016-04-04
sessionStorage是指本地存儲一個會話中的數(shù)據(jù),這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當會話結束后數(shù)據(jù)也隨之銷毀,這篇文章主要給大家介紹了關于js前端存儲之sessionStorage使用方法的相關資料,需要的朋友可以參考下2024-06-06
javascript使用定時函數(shù)實現(xiàn)跳轉(zhuǎn)到某個頁面
定時跳轉(zhuǎn)到某個頁面，比如跳轉(zhuǎn)到一個頁面處理完任務，然后又回到原來的頁面，這個用javascript的定時函數(shù)很容易實現(xiàn)2013-12-12
這個對聯(lián)廣告與其它的有所區(qū)別，這個是頁面加載時先沒看到廣告，然后從左邊快速飛進來的兩個對聯(lián)廣告哦，下面我們一起來看看對聯(lián)廣告效果代碼2014-02-02
在項目開發(fā)過程中遇到一個需要從小程序上傳圖片的需求,此需求實現(xiàn)起來并不難,下面這篇文章主要給大家介紹了關于微信小程序開發(fā)指南之圖片壓縮解決方案的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
本篇文章主要介紹了webpack構建vue項目的詳細教程（配置篇），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
javascript+HTML5的Canvas實現(xiàn)Lab單車動畫效果
這篇文章主要介紹了javascript+HTML5的Canvas實現(xiàn)Lab單車動畫效果,涉及javascript使用Canvas配合數(shù)學運算實現(xiàn)自行車動畫效果,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細介紹了用javascript實現(xiàn)倒計時效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02