首页
所有分类
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 相关文章推荐
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
Nov 30 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
May 02 Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 Javascript
jQuery 仿百度输入标签插件附效果图
Jul 04 Javascript
理解JavaScript原型链
Oct 25 Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
vue2里面ref的具体使用方法
Oct 27 Javascript
vue+axios+mock.js环境搭建的方法步骤
Aug 28 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 Javascript
详解小程序横屏方案对比
Jun 28 Javascript
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
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) flex-shrink(1) 代理(2) GNN(1) canvas(2) 图片模糊(1) flex(1) 选择器(1) 匹配文本(1) 追加文本(1)
You might like
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
关于访问控制的一首PHP面试题(对属性或方法的访问控制)
2012/09/13 PHP
smarty简单入门实例
2014/11/28 PHP
php实现微信支付之企业付款
2018/05/30 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
php链式操作的实现方式分析
2019/08/12 PHP
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
2011/04/16 Javascript
由Javascript实现的页面日历
2011/11/04 Javascript
BootStrap表单验证实例代码
2017/01/13 Javascript
微信小程序 支付功能开发错误总结
2017/02/21 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
layui数据表格实现重载数据表格功能(搜索功能）
2019/07/27 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
python切片（获取一个子列表（数组））详解
2019/08/09 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
Python序列化pickle模块使用详解
2020/03/05 Python
Django REST 异常处理详解
2020/07/15 Python
Python限制内存和CPU使用量的方法（Unix系统适用）
2020/08/04 Python
罗德与泰勒百货官网：Lord & Taylor
2016/08/12 全球购物
阿玛尼美妆英国官网：Giorgio Armani Beauty英国
2019/03/28 全球购物
高中班长自我鉴定
2013/12/20 职场文书
《英英学古诗》教学反思
2014/04/11 职场文书
高中军训的心得体会
2014/09/01 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
2015年关爱留守儿童工作总结
2015/05/22 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python
Mysql关于数据库是否应该使用外键约束详解说明
2021/10/24 MySQL