原生js实现无限循环轮播图效果


Posted in Javascript onJanuary 20, 2017

知识要点

1.实现无限循环的原理:

以偏移的距离来判断是否跳回第一张和最后一张

也可以利用循环判断图片的当前索引值

var newLeft=parseInt(list.style.left)+offset;//当前的偏移量+下一次的偏移量=新的偏移量
list.style.left=newLeft+"px";//当前的偏移值=新的偏移值
//以偏移的距离来判断是否跳回第一张和最后一张
if(newLeft>-600){
 list.style.left=-3000+"px";
}
if (newLeft<-3000){
 list.style.left=-600+"px";
}

2.当前图片轮播的圆点变色显示:

因为每次点击index+1 所以当前的index-1就是button的索引

//添加on前先清空on
for(var i=0;i<buttons.length;i++){
 if(buttons[i].className=="on"){
 buttons[i].className="";
 break;
 }
}
buttons[index-1].className="on";

3.实现动画滚动效果:

原理就是把每次的偏移量分为多次完成比如一次600px那就分为10次每次偏移60px

就要用到setTimeout(go,10);//10毫秒再次调用go函数,一直到不满足条件就停

var newLeft=parseInt(list.style.left)+offset;//当前的偏移量+下一次的偏移量=新的偏移量
var time=300;//位移总时间
var interval=10;//位移间隔时间
//动画效果自定义公式: 每次位移的距离=单次偏移距离/位移次数
var speed=offset/(time/interval);
//递归函数 直到不满足条件(跳到辅助图)
//递归就是把600偏移量分为多次完成偏移
function go(){
 //speed<0 并且 当前偏移量>下一次偏移量 就是向左偏移 || 反之向右偏移 
 if ((speed<0 &&parseInt(list.style.left)>newLeft) || (speed>0 &&parseInt(list.style.left)<newLeft)) {
 list.style.left=parseInt(list.style.left)+speed+"px";//每次位移的值
 setTimeout(go,interval);//10毫秒再次调用go函数
 }else{
 animated=false;
 list.style.left=newLeft+"px";//当前的偏移值=新的偏移值
 if(newLeft>-600){
 list.style.left=-3000+"px";
 }
 if (newLeft<-3000){
 list.style.left=-600+"px";
 }
 }
}

4.点击圆点按钮执行动画:

原理获取当前的按钮位置再获取要点击的按钮的位置

用(点击的——当前的)*-600=需要跳转的正负距离(向左或向右)

for(var i=0;i<buttons.length;i++){
 buttons[i].onclick=function(){
 if(this.className=="on"){
 return;
 }
 //要点击的index属性的值 转换为整数
 var myIndex=parseInt(this.getAttribute("index"));
 //偏移量=-600*(要点击的位置-当前所在的位置),当前的位置就是index循环所得
 var os=-600*(myIndex-index);
 //切换完成后,把点击的index位置变成当前的index位置 
 index=myIndex;
 showButton();
 if(!animated){
 animate(os);
 }
 }
}

5.自动播放:

给外层容器加个onmouseover事件再调用setInterval方法

//给方法定义全局变量是因为停止的时候要使用
function play(){
 timer=setInterval(function(){
 next.onclick();
 },3000);
}
clearInterval(timer)

完整代码

注:图片链接本地替换一下

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.clear{clear: both;float: none;height: 0;overflow: hidden;}
#container{width: 600px; height: 400px; overflow: hidden; position: relative; }
#list{width: 4200px; height: 400px; position: absolute; z-index: 1;}
#list img{float: left;}
#buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;}
#buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;}
#buttons .on { background: orangered;}
.arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px; position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}
.arrow:hover { background-color: RGBA(0,0,0,.7);}
#container:hover .arrow { display: block;}
#prev { left: 20px;}
#next { right: 20px;}
</style> 
</head> 
<body>
 <div id="container">
 <div id="list" style="left: -600px;">
 <img src="images/5.jpg" alt="5"/>  
  <img src="images/1.jpg" alt="1"/>
  <img src="images/2.jpg" alt="2"/>
  <img src="images/3.jpg" alt="3"/>
  <img src="images/4.jpg" alt="4"/>
  <img src="images/5.jpg" alt="5"/>
  <img src="images/1.jpg" alt="1"/>
 </div>
 <div id="buttons">
  <span index="1" class="on"></span>
  <span index="2"></span>
  <span index="3"></span>
  <span index="4"></span>
  <span index="5"></span>
 </div>
 <a href="javascript:;" id="prev" class="arrow"><</a>
 <a href="javascript:;" id="next" class="arrow">></a>
 </div>
 <script type="text/javascript">
 //在页面加载完后立即执行多个函数方案。
 function addloadEvent(func){
 var oldonload=window.onload;
 if(typeof window.onload !="function"){
  window.onload=func;
 }
 else{
  window.onload=function(){
  if(oldonload){
   oldonload(); 
  }
  func();
  }
 }
 }
 //在页面加载完后立即执行多个函数方案结束。
 addloadEvent(lbt);
 //轮播图动画切换原理
 function lbt(){
 var container=document.getElementById("container");
 var prev=document.getElementById("prev");
 var next=document.getElementById("next");
 var list=document.getElementById("list");
 var buttons=document.getElementById("buttons").getElementsByTagName("span");
 var imgs=list.getElementsByTagName("img");
 var index=1;
 var animated=false;
 var timer;
 //当前图片轮播的圆点变色显示,原理:index数值是跟随list滑动次数递增的,第一次index=1,所以第一个button的索引值就是0。
 //for循环是添加on样式之前要清空之前的on。
 function showButton(){
 for(var i=0;i<buttons.length;i++){
 if(buttons[i].className=="on"){
 buttons[i].className="";
 break;
 }
 }
 buttons[index-1].className="on";
 }
 //圆点变色显示 结束。
 function animate(offset){
 animated=true;
 var newLeft=parseInt(list.style.left)+offset;//当前的偏移量+下一次的偏移量=新的偏移量
 var time=300;//位移总时间
 var interval=10;//位移间隔时间
 //动画效果自定义公式: 每次位移的距离=单次偏移距离/位移次数
 var speed=offset/(time/interval);
 //递归函数 直到不满足条件(跳到辅助图)
 //递归就是把600偏移量分为多次完成偏移
 function go(){
 //speed<0 并且 当前偏移量>下一次偏移量 就是向左偏移 || 反之向右偏移 
 if ((speed<0 &&parseInt(list.style.left)>newLeft) || (speed>0 &&parseInt(list.style.left)<newLeft)) {
 list.style.left=parseInt(list.style.left)+speed+"px";//每次位移的值
 setTimeout(go,interval);//10毫秒再次调用go函数
 }else{
 animated=false;
 list.style.left=newLeft+"px";//当前的偏移值=新的偏移值
 if(newLeft>-600){
 list.style.left=-3000+"px";
 }
 if (newLeft<-3000){
 list.style.left=-600+"px";
 }
 }
 }
 go();
 }
 //自动播放3秒执行一次next.onclick
 function play(){
 timer=setInterval(function(){
 next.onclick();
 },3000);
 }
 function stop(){
 clearInterval(timer);
 }
 //执行所有函数
 next.onclick=function(){
 if(index==5){
 index=1;
 }else{
 index+=1;
 }
 showButton();
 if(!animated){
 animate(-600);
 }
 }
 //执行所有函数
 prev.onclick=function(){
 if(index==1){
 index=5;
 }else{
 index-=1;
 }
 showButton();
 if(!animated){
 animate(600);
 }
 }
 //点击圆点按钮 偏移
 for(var i=0;i<buttons.length;i++){
 buttons[i].onclick=function(){
 if(this.className=="on"){
 return;
 }
 //要点击的index属性的值 转换为整数
 var myIndex=parseInt(this.getAttribute("index"));
 //偏移量=-600*(要点击的位置-当前所在的位置),当前的位置就是index循环所得
 var os=-600*(myIndex-index);
 //切换完成后,把点击的index位置变成当前的index位置 
 index=myIndex;
 showButton();
 if(!animated){
 animate(os);
 }
 }
 }
 container.onmouseover=stop;
 container.onmouseout=play;
 play();
 }
 </script>
</body> 
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jquery判断小数点两位和自动删除小数两位后的数字
Mar 19 Javascript
IE6浏览器中window.location.href无效的解决方法
Nov 20 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
详解原生js实现offset方法
Jun 15 Javascript
微信小程序实现的自定义分享功能示例
Feb 12 Javascript
JS合并两个数组的3种方法详解
Oct 24 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
Dec 16 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 Javascript
bootstrap实现tab选项卡切换
Aug 09 Javascript
解决vuex刷新数据消失问题
Nov 12 Javascript
JavaScript设计模式之原型模式详情
Jun 21 Javascript
原生js实现弹出层效果
Jan 20 #Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 #Javascript
原生js实现图片放大缩小计时器效果
Jan 20 #Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 #Javascript
原生js实现新闻列表展开/收起全文功能
Jan 20 #Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 #Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
Jan 20 #Javascript
You might like
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
JavaScript取得鼠标绝对位置程序代码介绍
2012/09/16 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
sencha ext js 6 快速入门(必看)
2016/06/01 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
2017/09/12 Javascript
了解前端理论:rscss和rsjs
2019/05/23 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
JavaScript中的各种宽高属性的实现
2020/05/08 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
[53:43]VP vs NewBee Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
Python去掉字符串中空格的方法
2014/03/11 Python
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
详细解读Python中解析XML数据的方法
2015/10/15 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
使用keras根据层名称来初始化网络
2020/05/21 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
党员学习新党章思想汇报
2014/10/25 职场文书
2014年少先队工作总结
2014/12/03 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
傅雷家书读书笔记
2015/06/29 职场文书
给校长的建议书范文
2015/09/14 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
详解MySQL连接挂死的原因
2021/05/18 MySQL
手把手教你从零开始react+antd搭建项目
2021/06/03 Javascript