js实现左右轮播图


Posted in Javascript onJanuary 09, 2020

本文实例为大家分享了js实现左右轮播图的具体代码,供大家参考,具体内容如下

我的轮播图功能有:自动播放、点击焦点切换和点击左右按钮切换

效果图:

自动轮播

js实现左右轮播图

点击焦点切换

js实现左右轮播图

点击左右按钮切换

js实现左右轮播图

注意:本文用带背景颜色的li标签指代图片,有需要的话可以将图片插入li标签内

思路:

基础布局和css样式
(1) 给盛放要轮播的图片的盒子绝对定位
js中的代码
(2) 复制第一张图片放在盒子最后,复制最后一张图片放在盒子最前,以保证轮播图左右滑动效果(否则看起来会有一点卡顿)
(3)设置盒子位置,通过移动这个盒子的位置,产生图片移动的效果,用定时器设置轮播效果
(4)设置鼠标划入停播事件,设置按钮点击事件,设置焦点点击事件
(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、复制元素

复制元素,将复制元素放在指定位置
改变盛放图片的盒子大小,改变图片位置,使页面打开时显示第一张图片

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、开始轮播

//设置一个图片索引
 let index = 1
 //一会儿会用到这段代码,就直接封装成函数了
 autoplay()
//自动播放函数,每隔两秒切换一次图片
 function autoplay() {
 move_time = setInterval(() => {
 index++
 move(ul, 'left', -index * wrap_width, movend)
 }, 2000)
 }
 //运动函数,设置图片切换方式
 //参数ele,元素;type,元素属性;value,元素运动结束时属性值;cb(),元素运动结束函数
 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)
 }
 //运动结束函数
 //判断索引临界值,更改索引,更改盒子位置,使图片轮播
 //让焦点和图片配套
 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、鼠标移入停播,移出开始播放

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、解决点击太快定时器混乱问题

添加开关,点击前关着,点击后图片未切换完成开着,图片切换完打开开关,将语句添加进点击事件函数中即可

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>
 //自动播放函数,每隔两秒切换一次图片
 function autoplay() {
 move_time = setInterval(() => {
 index++
 move(ul, 'left', -index * wrap_width, movend)
 }, 2000)
 }
 //运动函数,设置图片切换方式
 //参数ele,元素;type,元素属性;value,元素运动结束时属性值;cb(),元素运动结束函数
 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)
 }
 //运动结束函数
 //判断索引临界值,更改索引,更改盒子位置,使图片轮播
 //让焦点和图片配套
 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、解决连续点击页面混乱问题
 //添加开关,点击前关着,点击后图片未切换完成开着,图片切换完打开开关
 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、复制元素,将复制元素放在指定位置
 //改变盛放图片的盒子大小,改变图片位置,使页面打开时显示第一张图片
 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、图片自动轮播
 //设置一个图片索引
 let index = 1
 //一会儿会用到这段代码,就直接封装成函数了
 autoplay()
 //5、鼠标移入停播,移出开始播放
 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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
jQuery仿Excel表格编辑功能的实现代码
May 01 Javascript
Javascript实现返回上一页面并刷新的小例子
Dec 11 Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
Jan 04 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
微信小程序实现YDUI的ScrollNav组件
Feb 02 Javascript
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
Aug 01 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
Aug 27 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 #Javascript
一看就会的vuex实现登录验证(附案例)
Jan 09 #Javascript
Websocket 向指定用户发消息的方法
Jan 09 #Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 #Javascript
JS实现商品橱窗特效
Jan 09 #Javascript
微信小程序实现页面浮动导航
Jan 08 #Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 #Javascript
You might like
php异常处理技术,顶级异常处理器
2012/06/13 PHP
PHP实现获取图片颜色值的方法
2014/07/11 PHP
使用URL传输SESSION信息
2015/07/14 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
js 获取服务器控件值的代码
2010/03/05 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
file模式访问网页时iframe高度自适应解决方案
2013/01/16 Javascript
jQuery的context属性用法实例
2014/12/27 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
使用JQuery实现智能表单验证功能
2016/03/08 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
浅析 NodeJs 的几种文件路径
2017/06/07 NodeJs
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
2017/07/17 jQuery
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
Python实现向服务器请求压缩数据及解压缩数据的方法示例
2017/06/09 Python
Python中@property的理解和使用示例
2019/06/11 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
python之列表推导式的用法
2019/11/29 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
希尔顿酒店官方网站:Hilton Hotels
2017/06/01 全球购物
研讨会主持词
2014/04/02 职场文书
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang