首页
所有分类
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 相关文章推荐
top.location.href 没有权限 解决方法
Aug 05 Javascript
Node.js插件的正确编写方式
Aug 03 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
基于JS代码实现实时显示系统时间
Jun 16 Javascript
javascript垃圾收集机制的原理分析
Dec 08 Javascript
基于Require.js使用方法(总结)
Oct 26 Javascript
Vue 进入/离开动画效果
Dec 26 Javascript
小程序实现选择题选择效果
Nov 04 Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 Javascript
vue 使用外部JS与调用原生API操作示例
Dec 02 Javascript
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
原生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
YAESU(1) ICF-903L(1) 根德5570(1) 74HC4066(1) AN-LP1(1) YB-230(1) 239军机(1) frg-100(1) BCLer(1) FS1016(1)
You might like
php max_execution_time执行时间问题
2011/07/17 PHP
关于js和php对url编码的处理方法
2014/03/04 PHP
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
2014/01/02 Javascript
JavaScript作用域链示例分享
2014/05/27 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
JavaScript实现动态添加，删除行的方法实例详解
2015/07/02 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络（1）
2015/11/30 Javascript
javascript设置页面背景色及背景图片的方法
2015/12/29 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
jquery的checkbox,radio,select等方法小结
2016/08/30 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
2016/09/18 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
vue动态禁用控件绑定disable的例子
2019/10/28 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
python使用多线程不断刷新网页的方法
2015/03/31 Python
python生成验证码图片代码分享
2016/01/28 Python
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
综合实践活动方案
2014/02/14 职场文书
员工试用期自我鉴定范文
2014/09/15 职场文书
高中地理教学反思
2016/02/19 职场文书
关于html选择框创建占位符的问题
2021/06/09 HTML / CSS
Python编写nmap扫描工具
2021/07/21 Python