首页
所有分类
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 相关文章推荐
js模拟点击事件实现代码
Nov 06 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
Aug 07 Javascript
jQuery实现美观的多级动画效果菜单代码
Sep 06 Javascript
jQuery中选择器的基础使用教程
May 23 Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 Javascript
js实现键盘自动打字效果
Dec 23 Javascript
老生常谈jquery id选择器和class选择器的区别
Feb 12 Javascript
vue-router路由懒加载和权限控制详解
Dec 13 Javascript
基于vue-video-player自定义播放器的方法
Mar 21 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
Sep 18 Javascript
vue+Element中table表格实现可编辑（select下拉框）
May 21 Javascript
vue实现同时设置多个倒计时
May 20 Vue.js
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
法国购物网站(144) 丹麦购物网站(22) 埃及购物网站(2) 墨西哥购物网站(16) 俄罗斯购物网站(137) 台湾购物网站(77) 印尼购物网站(37) 马来西亚购物网站(41) 意大利购物网站(128) 澳大利亚购物网站(309)
You might like
PHP的面向对象编程
2006/10/09 PHP
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
如何使用php实现评委评分器
2015/07/31 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
PHP的运行机制与原理(底层)
2015/11/16 PHP
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
深入理解JavaScript系列(12) 变量对象（Variable Object）
2012/01/16 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
2015/04/10 Javascript
基于javascript实现仿百度输入框自动匹配功能
2016/01/03 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
2020/12/30 Vue.js
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
Python字符串和字典相关操作的实例详解
2017/09/23 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
如何用python写一个简单的词法分析器
2018/12/18 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
美国玛丽莎收藏奢华时尚商店：Marissa Collections
2016/11/21 全球购物
J2EE是技术还是平台还是框架
2016/08/14 面试题
教师读书活动总结
2014/05/07 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
生日寿星公答谢词
2015/09/29 职场文书
Python连续赋值需要注意的一些问题
2021/06/03 Python
Python List remove()实例用法详解
2021/08/02 Python