首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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>

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

js实现左右轮播图

- Author -

qq_42736234

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
Feb 04 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
跨域请求的完美解决方法(JSONP, CORS)
Jun 12 Javascript
JavaScript中关键字 in 的使用方法详解
Oct 17 Javascript
详解webpack提取第三方库的正确姿势
Dec 22 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 Javascript
快速解决处理后台返回json数据格式的问题
Aug 07 Javascript
Vue中android4.4不兼容问题的解决方法
Sep 04 Javascript
微信小程序之事件交互操作实例分析
Dec 03 Javascript
微信小程序解除10个请求并发限制
Dec 18 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
网页解析(1) decorator(1) 装饰器(1) 嵌套(1) translation(2) 循环(3) 二维数组(2) 查找算法(1) bs4(1) 分块(1)
You might like
一个简单的域名注册情况查询程序
2006/10/09 PHP
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
PHP加密解密实例分析
2015/12/25 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
js 加载并解析XML字符串的代码
2009/12/13 Javascript
页面中iframe相互传值传参
2009/12/13 Javascript
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
Javascript实现的Map集合工具类完整实例
2015/07/31 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
js中apply与call简单用法详解
2017/11/06 Javascript
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
python 函数传参之传值还是传引用的分析
2017/09/07 Python
Python及Django框架生成二维码的方法分析
2018/01/31 Python
详解python的ORM中Pony用法
2018/02/09 Python
window环境pip切换国内源（pip安装异常缓慢的问题）
2019/12/31 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
使用Python实现音频双通道分离
2020/12/25 Python
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
让IE下支持Html5的placeholder属性的插件
2014/09/02 HTML / CSS
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
佛罗里达州印第安河新鲜水果：Hale Groves
2017/02/20 全球购物
大学生优秀自荐信范文
2014/02/25 职场文书
保密承诺书范文
2014/03/27 职场文书
诚信考试标语
2014/06/24 职场文书
邀请函格式范文
2015/02/02 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书
开学第一周值周总结
2015/07/16 职场文书
一年级语文教学随笔
2015/08/14 职场文书
求职信：会计求职的写作技巧
2019/04/24 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
一篇文章带你了解Python和Java的正则表达式对比
2021/09/15 Python
Python编程super应用场景及示例解析
2021/10/05 Python
一文搞懂MySQL索引页结构
2022/02/28 MySQL