原生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 相关文章推荐
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
Nov 06 Javascript
JavaScript控制Session操作方法
Jan 17 Javascript
Jquery动态进行图片缩略的原理及实现
Aug 13 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
简单理解vue中Props属性
Oct 27 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
Jan 11 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
Sep 04 Javascript
详解微信小程序input标签正则初体验
Aug 18 Javascript
JS 事件机制完整示例分析
Jan 15 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
php的curl实现get和post的代码
2008/08/23 PHP
PHP缓存机制Output Control详解
2014/07/14 PHP
php实现中文转数字
2016/02/18 PHP
PHP获取用户客户端真实IP的解决方案
2016/10/10 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
详解php中生成标准uuid(guid)的方法
2019/04/28 PHP
javascript中的有名函数和无名函数
2007/10/17 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
js前台判断开始时间是否小于结束时间
2012/02/23 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
浅谈JS中String()与 .toString()的区别
2016/10/20 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
JS打印彩色菱形的实例代码
2018/08/15 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
Python中跳台阶、变态跳台阶与矩形覆盖问题的解决方法
2018/05/19 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
python利用多种方式来统计词频(单词个数)
2019/05/27 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
学年自我鉴定范文
2013/10/01 职场文书
教师自荐书
2013/10/08 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
开平碉楼导游词
2015/02/06 职场文书
工程竣工验收申请报告
2015/05/15 职场文书
烈士陵园观后感
2015/06/08 职场文书
巴黎圣母院观后感
2015/06/10 职场文书
2015年暑期实践报告范文
2015/07/13 职场文书
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers