js實現(xiàn)左右輪播圖
更新時間：2020年01月09日 14:38:29 作者：qq_42736234
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)左右輪播圖，實現(xiàn)手動和自動兩種方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)左右輪播圖的具體代碼，供大家參考，具體內(nèi)容如下
我的輪播圖功能有：自動播放、點擊焦點切換和點擊左右按鈕切換
效果圖：
自動輪播
點擊焦點切換
點擊左右按鈕切換
注意：本文用帶背景顏色的li標(biāo)簽指代圖片，有需要的話可以將圖片插入li標(biāo)簽內(nèi)
思路：
基礎(chǔ)布局和css樣式
（1） 給盛放要輪播的圖片的盒子絕對定位
js中的代碼
（2） 復(fù)制第一張圖片放在盒子最后，復(fù)制最后一張圖片放在盒子最前，以保證輪播圖左右滑動效果（否則看起來會有一點卡頓）
（3）設(shè)置盒子位置，通過移動這個盒子的位置，產(chǎn)生圖片移動的效果，用定時器設(shè)置輪播效果
（4）設(shè)置鼠標(biāo)劃入停播事件，設(shè)置按鈕點擊事件，設(shè)置焦點點擊事件
（5）解決點擊太快定時器混亂問題，解決切屏后定時器混亂問題
一 布局
<!-- 布局 --> <section> <ul> <li style="background-color:aqua;">1</li> <li style="background-color: burlywood;">2</li> <li style="background-color: coral;">3</li> </ul> <ol></ol> <div> <a href=""><</a> <a href="">></a> </div>
二 樣式
* {
margin: 0;
padding: 0;
}
ul,
ol,
li {
list-style: none;
}
a {
text-decoration: none;
}
section {
width: 300px;
margin: 30px auto;
height: 200px;
border: 5px solid;
position: relative;
/* overflow: hidden; */
}
ul {
width: 300%;
height: 100%;
text-align: center;
line-height: 200px;
font-size: 100px;
position: absolute;
top: 0;
left: 0;
}
li {
width: 300px;
height: 100%;
float: left;
}
ol {
width: 150px;
height: 20px;
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
border-radius: 15px;
display: flex;
justify-content: space-evenly;
align-items: center;
}
ol li {
width: 15px;
height: 15px;
background-color: ivory;
border-radius: 50%;
}
.active {
background-color: greenyellow;
}
三 原生js
1、獲取元素
//1、獲取盛放圖片的盒子和盛放焦點的盒子
let ul = document.querySelector('ul')
let ol = document.querySelector('ol')
//獲取大盒子和大盒子的寬
let wrap = document.querySelector('section')
let wrap_width = wrap.clientWidth
2、添加焦點
const frg = document.createDocumentFragment()
for (let i = 0; i < ul.children.length; i++) {
let focus = document.createElement('li')
frg.appendChild(focus)
//焦點初始化
if (i == 0) focus.className = 'active'
}
ol.appendChild(frg)
3、復(fù)制元素
復(fù)制元素，將復(fù)制元素放在指定位置
改變盛放圖片的盒子大小,改變圖片位置，使頁面打開時顯示第一張圖片
let first = ul.firstElementChild.cloneNode(true) let last = ul.lastElementChild.cloneNode(true) ul.appendChild(first) ul.insertBefore(last, ul.firstElementChild) ul.style.width = ul.children.length * 100 + '%' ul.style.left = -wrap_width + 'px'
4、開始輪播
//設(shè)置一個圖片索引 let index = 1 //一會兒會用到這段代碼，就直接封裝成函數(shù)了 autoplay()
//自動播放函數(shù)，每隔兩秒切換一次圖片
function autoplay() {
move_time = setInterval(() => {
index++
move(ul, 'left', -index * wrap_width, movend)
}, 2000)
}
//運動函數(shù)，設(shè)置圖片切換方式
//參數(shù)ele，元素；type，元素屬性；value，元素運動結(jié)束時屬性值；cb()，元素運動結(jié)束函數(shù)
function move(ele, type, value, cb) {
//獲取元素屬性初始值
let spe = parseInt(getComputedStyle(ele)[type])
//元素屬性改變過程
change_timer = setInterval(() => {
value > spe ? spe += 5 : spe -= 5
ele.style[type] = spe + 'px'
if (value > spe) {
if (spe >= value) {
clearInterval(change_timer)
cb()
}
} else {
if (spe <= value) {
clearInterval(change_timer)
cb()
}
}
}, 10)
}
//運動結(jié)束函數(shù)
//判斷索引臨界值，更改索引，更改盒子位置，使圖片輪播
//讓焦點和圖片配套
function movend() {
if (index >= ul.children.length - 1) {
index = 1
ul.style.left = -index * wrap_width + 'px'
}
if (index <= 0) {
index = ol.children.length - 1
ul.style.left = -index * wrap_width + 'px'
}
for (let i = 0; i < ol.children.length; i++) {
ol.children[i].className = ''
}
ol.children[index - 1].className = 'active'
}
5、鼠標(biāo)移入停播，移出開始播放
wrap.onmouseover = () => clearInterval(move_time) wrap.onmouseout = () => autoplay()
6、點擊左右按鈕切換圖片
//獲取左右按鈕
let left = document.querySelector('div').firstElementChild
let right = document.querySelector('div').lastElementChild
//點擊左按鈕，索引減少，圖片切到上一張
left.onclick = function() {
index--
move(ul, 'left', -index * wrap_width, movend)
}
//點擊右按鈕，索引增加，圖片切到下一張
right.onclick = function() {
index++
move(ul, 'left', -index * wrap_width, movend)
}
7、點擊焦點切換圖片
for (let i = 0; i < ol.children.length; i++) {
//獲取焦點索引
ol.children[i].id = i
//點擊焦點切換圖片
ol.children[i].onclick = function() {
index = this.id - 0 + 1
move(ul, 'left', -index * wrap_width, movend)
}
}
8、解決切屏后定時器混亂問題
9、解決點擊太快定時器混亂問題
添加開關(guān)，點擊前關(guān)著，點擊后圖片未切換完成開著，圖片切換完打開開關(guān)，將語句添加進(jìn)點擊事件函數(shù)中即可
if (flag) return flag = true
四 全部代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>輪播圖21</title>
<style>
* {
margin: 0;
padding: 0;
}
ul,
ol,
li {
list-style: none;
}
a {
text-decoration: none;
}
section {
width: 300px;
margin: 30px auto;
height: 200px;
border: 5px solid;
position: relative;
overflow: hidden;
}
ul {
width: 300%;
height: 100%;
text-align: center;
line-height: 200px;
font-size: 100px;
position: absolute;
top: 0;
left: 0;
}
li {
width: 300px;
height: 100%;
float: left;
}
ol {
width: 150px;
height: 20px;
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
border-radius: 15px;
display: flex;
justify-content: space-evenly;
align-items: center;
}
ol li {
width: 15px;
height: 15px;
background-color: ivory;
border-radius: 50%;
}
.active {
background-color: purple;
}
div {
position: absolute;
font-size: 20px;
height: 30px;
width: 100%;
top: 50%;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
align-items: center;
}
div a {
background-color: rgba(0, 0, 0, 0.2);
width: 30px;
}
div a:active {
background-color: rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<!-- 布局 -->
<section>
<ul>
<li style="background-color:aqua;">1</li>
<li style="background-color: burlywood;">2</li>
<li style="background-color: coral;">3</li>
</ul>
<ol></ol>
<div>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" ><</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" >></a>
</div>
</section>
<script>
</script>
<script>
//自動播放函數(shù)，每隔兩秒切換一次圖片
function autoplay() {
move_time = setInterval(() => {
index++
move(ul, 'left', -index * wrap_width, movend)
}, 2000)
}
//運動函數(shù)，設(shè)置圖片切換方式
//參數(shù)ele，元素；type，元素屬性；value，元素運動結(jié)束時屬性值；cb()，元素運動結(jié)束函數(shù)
function move(ele, type, value, cb) {
//獲取元素屬性初始值
let spe = parseInt(getComputedStyle(ele)[type])
//元素屬性改變過程
change_timer = setInterval(() => {
value > spe ? spe += 10 : spe -= 10
ele.style[type] = spe + 'px'
if (value > spe) {
if (spe >= value) {
clearInterval(change_timer)
cb()
}
} else {
if (spe <= value) {
clearInterval(change_timer)
cb()
}
}
}, 10)
}
//運動結(jié)束函數(shù)
//判斷索引臨界值，更改索引，更改盒子位置，使圖片輪播
//讓焦點和圖片配套
function movend() {
if (index >= ul.children.length - 1) {
index = 1
ul.style.left = -index * wrap_width + 'px'
}
if (index <= 0) {
index = ol.children.length
ul.style.left = -index * wrap_width + 'px'
}
for (let i = 0; i < ol.children.length; i++) {
ol.children[i].className = ''
}
ol.children[index - 1].className = 'active'
flag = false
}
//1、獲取盛放圖片的盒子和盛放焦點的盒子
let ul = document.querySelector('ul')
let ol = document.querySelector('ol')
//獲取大盒子和大盒子的寬
let wrap = document.querySelector('section')
let wrap_width = wrap.clientWidth
//9、解決連續(xù)點擊頁面混亂問題
//添加開關(guān)，點擊前關(guān)著，點擊后圖片未切換完成開著，圖片切換完打開開關(guān)
let flag = false
//2、添加焦點
const frg = document.createDocumentFragment()
for (let i = 0; i < ul.children.length; i++) {
let focus = document.createElement('li')
frg.appendChild(focus)
//焦點初始化
if (i == 0) focus.className = 'active'
}
ol.appendChild(frg)
//3、復(fù)制元素，將復(fù)制元素放在指定位置
//改變盛放圖片的盒子大小,改變圖片位置，使頁面打開時顯示第一張圖片
let first = ul.firstElementChild.cloneNode(true)
let last = ul.lastElementChild.cloneNode(true)
ul.appendChild(first)
ul.insertBefore(last, ul.firstElementChild)
ul.style.width = ul.children.length * 100 + '%'
ul.style.left = -wrap_width + 'px'
//4、圖片自動輪播
//設(shè)置一個圖片索引
let index = 1
//一會兒會用到這段代碼，就直接封裝成函數(shù)了
autoplay()
//5、鼠標(biāo)移入停播，移出開始播放
wrap.onmouseover = () => clearInterval(move_time)
wrap.onmouseout = () => autoplay()
//6、點擊左右按鈕切換圖片
//獲取左右按鈕
let left = document.querySelector('div').firstElementChild
let right = document.querySelector('div').lastElementChild
//點擊左按鈕，索引減少，圖片切到上一張
left.onclick = function() {
if (flag) return
index--
move(ul, 'left', -index * wrap_width, movend)
flag = true
}
//點擊右按鈕，索引增加，圖片切到下一張
right.onclick = function() {
if (flag) return
index++
move(ul, 'left', -index * wrap_width, movend)
flag = true
}
//7、點擊焦點切換圖片
for (let i = 0; i < ol.children.length; i++) {
//獲取焦點索引
ol.children[i].id = i
//點擊焦點切換圖片
ol.children[i].onclick = function() {
if (flag) return
index = this.id - 0 + 1
move(ul, 'left', -index * wrap_width, movend)
flag = true
}
}
//8、解決切屏后頁面混亂問題
document.onvisibilitychange = () => document.visibilityState == 'hidden' ? clearInterval(move_time) : autoplay()
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js實現(xiàn)類似iphone的網(wǎng)頁滑屏解鎖功能示例【附源碼下載】
這篇文章主要介紹了js實現(xiàn)類似iphone的網(wǎng)頁滑屏解鎖功能,結(jié)合完整實例形式分析了javascript動態(tài)操作頁面元素實現(xiàn)解鎖效果的相關(guān)實現(xiàn)技巧，并附帶供讀者源碼下載參考,需要的朋友可以參考下2019-06-06
這篇文章主要為大家詳細(xì)介紹了JavaScript仿京東放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
Ucren Virtual Desktop V2.0...2006-11-11
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)頁面無縫滾動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
Javascript實現(xiàn)視頻文件播放功能(示例詳解)
這篇文章主要介紹了Javascript實現(xiàn)視頻文件播放功能,使用CSS完成相應(yīng)的布局樣式,利用JavaScript函數(shù)來監(jiān)聽進(jìn)度條,然后使用鼠標(biāo)點擊按鈕實現(xiàn)對視頻的播放,需要的朋友可以參考下2023-10-10
JavaScript實現(xiàn)點擊按鈕復(fù)制指定區(qū)域文本(推薦)
這篇文章主要介紹了JavaScript實現(xiàn)點擊按鈕復(fù)制指定區(qū)域文本(推薦)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-11-11
深入淺析JS Function()構(gòu)造函數(shù)
這篇文章給大家介紹了js function()構(gòu)造函數(shù)的知識以及關(guān)于function()構(gòu)造函數(shù)需要注意的幾個要點，本文介紹的非常不錯，具有參考借鑒價值，感興趣的朋友一起看下吧2016-08-08
前端JavaScript實現(xiàn)文件壓縮的全面優(yōu)化指南
JavaScript文件大小直接影響網(wǎng)頁加載速度和用戶體驗,本文將詳細(xì)介紹從基礎(chǔ)到高級的各種JavaScript壓縮優(yōu)化技術(shù),小伙伴可以根據(jù)需求進(jìn)行選擇2025-04-04
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)滑動滑塊驗證登錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
CocosCreator ScrollView優(yōu)化系列之分幀加載
這篇文章主要介紹了CocosCreator ScrollView的優(yōu)化，從分幀加載進(jìn)行了講解，對性能優(yōu)化感興趣的同學(xué)，一定要看一下2021-04-04