雷火电竞-中国电竞赛事及体育赛事平台

歡迎來到入門教程網(wǎng)！

JavaScript

當(dāng)前位置：主頁 > 網(wǎng)絡(luò)編程 > JavaScript >

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

來源：本站原創(chuàng)|時(shí)間：2020-01-10|欄目：JavaScript|點(diǎn)擊： 次

本文實(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=""><</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、獲取盛放圖片的盒子和盛放焦點(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" ><</a>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" >></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í)有所幫助，也希望大家多多支持我們。

上一篇：微信小程序新聞網(wǎng)站詳情頁實(shí)例代碼

欄    目：JavaScript

下一篇：微信小程序wxs實(shí)現(xiàn)吸頂效果

本文標(biāo)題：js實(shí)現(xiàn)左右輪播圖

本文地址：http://www.jygsgssxh.com/a1/JavaScript/9244.html

網(wǎng)頁制作CMS教程網(wǎng)絡(luò)編程軟件編程腳本語言數(shù)據(jù)庫服務(wù)器

如果侵犯了您的權(quán)利，請與我們聯(lián)系，我們將在24小時(shí)內(nèi)進(jìn)行處理、任何非本站因素導(dǎo)致的法律后果，本站均不負(fù)任何責(zé)任。

聯(lián)系QQ：835971066 | 郵箱：835971066#qq.com(#換成@)

Copyright © 2002-2020 腳本教程網(wǎng) 版權(quán)所有