js實(shí)現(xiàn)左右輪播圖

更新時(shí)間：2020年01月09日 14:38:29 作者：qq_42736234

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)左右輪播圖，實(shí)現(xiàn)手動(dòng)和自動(dòng)兩種方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)左右輪播圖的具體代碼，供大家參考，具體內(nèi)容如下

我的輪播圖功能有：自動(dòng)播放、點(diǎn)擊焦點(diǎn)切換和點(diǎn)擊左右按鈕切換

效果圖：

自動(dòng)輪播

點(diǎn)擊焦點(diǎn)切換

點(diǎn)擊左右按鈕切換

注意：本文用帶背景顏色的li標(biāo)簽指代圖片，有需要的話可以將圖片插入li標(biāo)簽內(nèi)

思路：

基礎(chǔ)布局和css樣式
（1）給盛放要輪播的圖片的盒子絕對定位
js中的代碼
（2）復(fù)制第一張圖片放在盒子最后，復(fù)制最后一張圖片放在盒子最前，以保證輪播圖左右滑動(dòng)效果（否則看起來會(huì)有一點(diǎn)卡頓）
（3）設(shè)置盒子位置，通過移動(dòng)這個(gè)盒子的位置，產(chǎn)生圖片移動(dòng)的效果，用定時(shí)器設(shè)置輪播效果
（4）設(shè)置鼠標(biāo)劃入停播事件，設(shè)置按鈕點(diǎn)擊事件，設(shè)置焦點(diǎn)點(diǎn)擊事件
（5）解決點(diǎn)擊太快定時(shí)器混亂問題，解決切屏后定時(shí)器混亂問題

一布局

<!-- 布局 -->
 <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="">&lt;</a>
 <a href="">&gt;</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、獲取盛放圖片的盒子和盛放焦點(diǎn)的盒子
 let ul = document.querySelector('ul')
 let ol = document.querySelector('ol')
 //獲取大盒子和大盒子的寬
 let wrap = document.querySelector('section')
 let wrap_width = wrap.clientWidth

2、添加焦點(diǎn)

const frg = document.createDocumentFragment()
 for (let i = 0; i < ul.children.length; i++) {
 let focus = document.createElement('li')
 frg.appendChild(focus)
 //焦點(diǎn)初始化
 if (i == 0) focus.className = 'active'
 }
 ol.appendChild(frg)

3、復(fù)制元素

復(fù)制元素，將復(fù)制元素放在指定位置
改變盛放圖片的盒子大小,改變圖片位置，使頁面打開時(shí)顯示第一張圖片

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è)置一個(gè)圖片索引
 let index = 1
 //一會(huì)兒會(huì)用到這段代碼，就直接封裝成函數(shù)了
 autoplay()

//自動(dòng)播放函數(shù)，每隔兩秒切換一次圖片
 function autoplay() {
 move_time = setInterval(() => {
 index++
 move(ul, 'left', -index * wrap_width, movend)
 }, 2000)
 }
 //運(yùn)動(dòng)函數(shù)，設(shè)置圖片切換方式
 //參數(shù)ele，元素；type，元素屬性；value，元素運(yùn)動(dòng)結(jié)束時(shí)屬性值；cb()，元素運(yùn)動(dòng)結(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)
 }
 //運(yùn)動(dòng)結(jié)束函數(shù)
 //判斷索引臨界值，更改索引，更改盒子位置，使圖片輪播
 //讓焦點(diǎn)和圖片配套
 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、點(diǎn)擊左右按鈕切換圖片

 //獲取左右按鈕
 let left = document.querySelector('div').firstElementChild
 let right = document.querySelector('div').lastElementChild
 //點(diǎn)擊左按鈕，索引減少，圖片切到上一張
 left.onclick = function() {
 index--
 move(ul, 'left', -index * wrap_width, movend)
 }
 //點(diǎn)擊右按鈕，索引增加，圖片切到下一張
 right.onclick = function() {
 index++
 move(ul, 'left', -index * wrap_width, movend)
 }

7、點(diǎn)擊焦點(diǎn)切換圖片

for (let i = 0; i < ol.children.length; i++) {
 //獲取焦點(diǎn)索引
 ol.children[i].id = i
 //點(diǎn)擊焦點(diǎn)切換圖片
 ol.children[i].onclick = function() {
 index = this.id - 0 + 1
 move(ul, 'left', -index * wrap_width, movend)
 }
 }

8、解決切屏后定時(shí)器混亂問題

9、解決點(diǎn)擊太快定時(shí)器混亂問題

添加開關(guān)，點(diǎn)擊前關(guān)著，點(diǎn)擊后圖片未切換完成開著，圖片切換完打開開關(guān)，將語句添加進(jìn)點(diǎ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" >&lt;</a>
 <a href="javascript:;" rel="external nofollow" rel="external nofollow" >&gt;</a>
 </div>
 </section>
 <script>
 </script>
 <script>
 //自動(dòng)播放函數(shù)，每隔兩秒切換一次圖片
 function autoplay() {
 move_time = setInterval(() => {
 index++
 move(ul, 'left', -index * wrap_width, movend)
 }, 2000)
 }
 //運(yùn)動(dòng)函數(shù)，設(shè)置圖片切換方式
 //參數(shù)ele，元素；type，元素屬性；value，元素運(yùn)動(dòng)結(jié)束時(shí)屬性值；cb()，元素運(yùn)動(dòng)結(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)
 }
 //運(yùn)動(dòng)結(jié)束函數(shù)
 //判斷索引臨界值，更改索引，更改盒子位置，使圖片輪播
 //讓焦點(diǎn)和圖片配套
 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、獲取盛放圖片的盒子和盛放焦點(diǎn)的盒子
 let ul = document.querySelector('ul')
 let ol = document.querySelector('ol')

 //獲取大盒子和大盒子的寬
 let wrap = document.querySelector('section')
 let wrap_width = wrap.clientWidth
 //9、解決連續(xù)點(diǎn)擊頁面混亂問題
 //添加開關(guān)，點(diǎn)擊前關(guān)著，點(diǎn)擊后圖片未切換完成開著，圖片切換完打開開關(guān)
 let flag = false
 //2、添加焦點(diǎn)
 const frg = document.createDocumentFragment()
 for (let i = 0; i < ul.children.length; i++) {
 let focus = document.createElement('li')
 frg.appendChild(focus)
 //焦點(diǎn)初始化
 if (i == 0) focus.className = 'active'
 }
 ol.appendChild(frg)
 //3、復(fù)制元素，將復(fù)制元素放在指定位置
 //改變盛放圖片的盒子大小,改變圖片位置，使頁面打開時(shí)顯示第一張圖片
 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、圖片自動(dòng)輪播
 //設(shè)置一個(gè)圖片索引
 let index = 1
 //一會(huì)兒會(huì)用到這段代碼，就直接封裝成函數(shù)了
 autoplay()
 //5、鼠標(biāo)移入停播，移出開始播放
 wrap.onmouseover = () => clearInterval(move_time)
 wrap.onmouseout = () => autoplay()
 //6、點(diǎn)擊左右按鈕切換圖片
 //獲取左右按鈕
 let left = document.querySelector('div').firstElementChild
 let right = document.querySelector('div').lastElementChild
 //點(diǎn)擊左按鈕，索引減少，圖片切到上一張
 left.onclick = function() {
 if (flag) return
 index--
 move(ul, 'left', -index * wrap_width, movend)
 flag = true
 }
 //點(diǎn)擊右按鈕，索引增加，圖片切到下一張
 right.onclick = function() {
 if (flag) return
 index++
 move(ul, 'left', -index * wrap_width, movend)
 flag = true
 }
 //7、點(diǎn)擊焦點(diǎn)切換圖片
 for (let i = 0; i < ol.children.length; i++) {
 //獲取焦點(diǎn)索引
 ol.children[i].id = i
 //點(diǎn)擊焦點(diǎn)切換圖片
 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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: