首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

原生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>

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

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

- Author -

夏天不做梦

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript基本编码模式小结
May 23 Javascript
浅谈javascript中的instanceof和typeof
Feb 27 Javascript
js插件YprogressBar实现漂亮的进度条效果
Apr 20 Javascript
实例详解jQuery表单验证插件validate
Jan 18 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
JS实现弹出居中的模式窗口示例
Jun 20 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
Oct 14 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
基于Vue单文件组件详解
Sep 15 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
Aug 20 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
T-SQL(1) Logrotate(1) ftpserver(1) NFS(1) 重复数据(2) 黑名单(1) 批处理(1) timestamp(1) SeaTunnel(1) 排序失效(1)
You might like
重置版游戏视频
2020/04/09 魔兽争霸
Android AsyncTack 异步任务实例详解
2016/11/02 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
jQuery插件ajaxFileUpload使用详解
2017/01/10 Javascript
vue如何获取点击事件源的方法
2017/08/10 Javascript
vue+iview写个弹框的示例代码
2017/12/05 Javascript
layer插件select选中默认值的方法
2018/08/14 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
layer弹出子iframe层父子页面传值的实现方法
2018/11/22 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
python中zip()方法应用实例分析
2016/04/16 Python
Python卸载模块的方法汇总
2016/06/07 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
Python饼状图的绘制实例
2019/01/15 Python
python实现简单日期工具类
2019/04/24 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
Python 实现敏感目录扫描的示例代码
2020/05/21 Python
python怎么判断模块安装完成
2020/06/19 Python
Python制作一个仿QQ办公版的图形登录界面
2020/09/22 Python
用Python实现职工信息管理系统
2020/12/30 Python
Nip + Fab官网：英国美容品牌
2019/08/26 全球购物
华为c/c++笔试题
2016/01/25 面试题
费用会计岗位职责
2014/01/01 职场文书
大学生饮食配送创业计划书
2014/01/04 职场文书