js轮播图
时间:2020-03-27
本文章向大家介绍js轮播图,主要包括js轮播图使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
思路:
设置一个窗口,让将图片放在li中,然后依次通过窗口,其中在放图片时,第一张和最后一张相同(防止过度不顺畅)
1.实现自动循环
2.点击按钮循环
3.现价导航循环
其中动画效果,我用的是定时器来实现的(个人感觉比较复杂),后期做过一个用CSS3实现的动画(比较简单易懂)
CSS布局就不多做介绍,主要介绍一下JS实现的逻辑功能:
<style type="text/css"> *{ margin: 0px; padding: 0px; /* transition: all 1.5s; */ } #main{ position: relative; width: 600px; height: 720px; margin: 50px auto; } #inner{ position: relative; width: 520px; height: 720px; margin: 0px auto; background-color: greenyellow; overflow: hidden; } #inner ul{ position: absolute; /* width: 2200px; */ /* left: -780px; */ list-style: none; } #inner li{ float: left; margin: 10px; } #inner img{ width: 500px; height: 700px; } #btn{ position: absolute; top: 50%; width: 100%; height: 50px; /* background-color: red; */ /* opacity: 0.5; */ overflow: hidden; } #btn i{ display: block; width: 50px; height: 50px; background-color: rgba(0,0,250,0.3); font-size: 45px; font-style: normal; line-height: 50px; text-align: center; } #btn i:hover{ cursor: pointer; font-size: 50px; } #btn .btn-left{ float: left; } #btn .btn-right{ float: right; } #bar{ margin-top: 10px; } #bar ul{ text-align: center; } #bar li{ display: inline-block; margin: 0 3px; width: 50px; height: 10px; background-color: rgba(255,0,0,0.6); transition: all 0.5s; } #bar li:hover{ cursor: pointer; height: 15px; } </style>
html如下:
<body> <div id="main"> <div id="inner"> <ul id="ul1" class="ssss"> <li><img src='./img/1.jpg'/></li> <li><img src='./img/2.jpg' /></li> <li><img src='./img/4.jpg' /></li> <li><img src='./img/5.jpeg' /></li> <li><img src='./img/1.jpg'/></li> </ul> </div> <div id="bar"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div id="btn"> <i class="btn-left"><</i> <i class="btn-right">></i> </div> </div>
JS如下:
写的时候,因为考虑用定时器来做动画,后面还要重复用到,于是就把定时器动画封装在一个方法中,
move(target,speed)接受两个参数,第一个参数表示移动的目标距离,第二个参数表示移动的速度,速度为正表示向左移动,速度为负表示向右移动(这里的左移动,右移动都表示的是ul整体相对于窗口的移动)
setli()用来给导航设置颜色
autoChange()自动轮播函数
这里index贯穿所有的函数,所有的操作都依赖于index的值.
在动画函数中,要注意的就是红色部分 clearInterval(ul.activ);用对象ul的属性activ来保存定时器动画,方便清除,在每次调用move()函数时都要清除上一次的动画,防止产生冲突.
window.onload = ()=>{ const imglist = document.getElementsByTagName("img"); const ul = document.getElementById("ul1"); const btn_left = document.getElementsByClassName('btn-left')[0]; const btn_right = document.getElementsByClassName('btn-right')[0]; const allLi = document.querySelectorAll("#bar li") const aLi = Array.from(allLi); let index = 0;
let active; let oldLeft = 0; ul.style.width = imglist.length*520 + "px"; aLi[0].style.backgroundColor = 'rgba(0,255,0,0.5)';//默认第一张颜色为绿色 //为所有的下标添加点击事件 for(let i=0;i<aLi.length;i++) aLi[i].onclick = ()=>{ clearInterval(active); if(index<i) { index = i; move(-520*index,-8);//向前走 } else { index = i; move(-520*index,8);//向后走 }
autoChange(); setli(index); } //自动轮播函数 function autoChange(){ active = setInterval(()=>{ index++; index%=imglist.length; move(-520*index,-8); setli(index); },3000); } autoChange();//自动执行 //设置下标的颜色 function setli(index){ for(let i=0;i<aLi.length;i++){ aLi[i].style.backgroundColor = 'rgba(255,0,0,0.5)'; } if(index==imglist.length-1) aLi[0].style.backgroundColor = 'rgba(0,255,0,0.5)'; else aLi[index].style.backgroundColor = 'rgba(0,255,0,0.5)'; } //动画函数 function move(target,speed){ clearInterval(ul.activ);//每次调用move函数都要清除上一次的定时器动画 ul.activ = setInterval(()=>{ let oldLeft = ul.offsetLeft; let curret = getComputedStyle(ul,null)['left'];//获取ul的left样式值 let newLeft = oldLeft + speed; //console.log("curren:"+curret,"oldLeft:"+oldLeft); //if(window.getComputedStyle) //获取属性值 //console.log(getComputedStyle(ul,null)['left']); if((speed < 0 && newLeft < target) || (speed > 0 && newLeft > target)){//当图片移动高德距离不能正好出现在窗口时,就需要调整newLeft=target //移动的距离不正好等于-520倍数时 newLeft = target; //ul.style.left = newLeft + 'px'; } ul.style.left = newLeft + 'px'; if(newLeft==target)//每一栋一张图片 就短暂暂停一下 { clearInterval(ul.activ); callback1();//从最后一张直接返回到第一张 //第一张和最后一张一样,在视觉上 造成连续动画 } function callback1(){ if(index>=imglist.length-1)//显示为最后一张图片 立马切换为第一张 { console.log("返回第一张图片..."); index=0; ul.style.left = 0 + 'px'; } } },20) console.log(index); } //左右按钮点击事件 btn_left.addEventListener('click',()=>{ btnC(btn_left,8); }); btn_right.addEventListener('click',()=>{ btnC(btn_right,-8); }); function btnC(obj,speed){ //console.log(obj); if(speed<0){//右移 index++; if(index>imglist.length-1){ index = 0; } }else{//左移 index--; if(index<0){ //第一张到最后一张 直接设置 ul.style.left = -520*(imglist.length-1) + 'px'; index = 3; } } clearInterval(active);//开始移动之前,清除之前的动画 move(-520*index,speed); autoChange();//动画执行完,要开启自动模式 setli(index); } }
效果如下:
原文地址:https://www.cnblogs.com/Tisou1/p/12583080.html
- 极速体验:Oracle 18c 下载和Scalable Sequence新特性
- springboot mybatis 事务管理
- Elasticsearch JAVA api轻松搞定groupBy聚合
- 微信加关注链接 一键关注公众号 解决用手机看网页无法扫二维码的烦恼
- springboot mybatis redis 二级缓存
- Elasticsearch强制重置未分配的分片(unassigned)
- 帝国cms调用缩略图和具体文章的方法
- python codis集群客户端(一) - 基于客户端daemon探活与服务列表维护
- python codis集群客户端(二) - 基于zookeeper对实例创建与摘除
- JavaScript replace() 方法
- 别让Open Sans字体拖慢wordpress后台速度
- Oracle 问题小结
- 为帝国cms模板添加站内搜索小教程
- 线程传参
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Mysql的逻辑架构
- centos7-httpd服务器
- Linux文件 目录与权限
- 简易数据分析(三):Web Scraper 批量抓取豆瓣数据与导入已有爬虫
- 嵌入式Linux开发环境搭建 配置Ubuntu
- 简易数据分析(五):Web Scraper 翻页、自动控制抓取数量 & 父子选择器
- 【深度】韦东山:一文看看尽linux对中断处理的前世今生
- 嵌入式开发之交叉编译程序万能命令_以freetype为例
- Python-EEG处理和事件相关电位(ERP)
- 嵌入式Linux开发 配置网络
- 问号脸:为什么 Java 中 “1000==1000” 为 false,而 ”100==100“ 为 true?
- 【硬核】韦东山:使用freetype显示一行文字
- 动画函数封装
- 事件基础及操作元素
- JQuery生成图片列表