实现图片首尾平滑轮播(JS原生方法—节流)


Posted in Javascript onOctober 17, 2017

首先给出HTML代码,要注意轮播图片表(#list)末尾加上第一个图片1.jpg,在首部加上最后一个图片5.jpg。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>首尾轮播</title>
 <link rel="stylesheet" href="首尾轮播.css" rel="external nofollow" >
<script src="首尾轮播.js"></script>
</head>
<body>
 <div id="container">
  <div id="list">
   <div><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="../imgs/5.jpg" alt=""></a></div>
   <div><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="../imgs/1.jpg" alt=""></a></div>
   <div><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="../imgs/2.jpg" alt=""></a></div>
   <div><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="../imgs/3.jpg" alt=""></a></div>
   <div><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="../imgs/4.jpg" alt=""></a></div>
   <div><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="../imgs/5.jpg" alt=""></a></div>
   <div><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="../imgs/1.jpg" alt=""></a></div>
  </div>

  <div class="arrow" id="prev"><</div>
  <div class="arrow" id="next">></div>


 </div>  

</body> 

</html>

接下来给出css和js代码,大家可以酌情根据图片的大小、数量、宽度,调整container、list的参数,这也是封装JS所要考虑的参数。

*{
 margin: 0;
 padding: 0;
}

#container{
 height: 400px;
 width: 500px;
 margin: 0 auto;
 position: relative;
 overflow: hidden;
 border: 1px solid black;
}

#list>div {
 float: left;
}
#list{
 position: absolute; 
 height: 400px;
 width: 3600px;
 
}

#list img{
 height: 400px;
 width: 500px;
}
.arrow {
 user-select:none;
 position: absolute;
 top:150px;
 z-index: 2;
 background-color: #aaa;
 height: 100px;
 width: 80px;
 cursor: pointer;
 opacity: 0.5;
 display: none;
 line-height: 100px;
 text-align: center;
 color: #222;
 font-size: 3em;

}
#container:hover .arrow{
 display: block;
}
 #prev{
 left:20px;
}

 #next{
 right: 20px;
}

在JS中,我们可以通过改变speed变量来控制图片切换的速度....这里用的是 element.style.transition来控制的过渡效果.

window.onload=function(){
 var container = document.getElementById('container');
 var list = document.getElementById('list');//获取图片容器
 var prev = document.getElementById('prev');//向前按钮
 var next = document.getElementById('next');//向后按钮
 var nowP = 1; //显示位置
 var judge = null; //执行权
 var speed = 0.1; // 切换速度 秒
 prev.onclick=function(){
  if(!judge){
    judge = setTimeout(function(){
     if(nowP==1){setTimeout(function(){
      list.style.transition="left 0s";
     list.style.left = "-2500px"; 
     nowP = 5;},speed*1000);} //当到达图片表左边缘时与动画同步切换 
     list.style.transition = "left "+speed+"s";
    move(500);
    nowP--;
    judge = null;
   },speed*1000);
  }
 };
 next.onclick=function(){
  if(!judge){    
    judge = setTimeout(function(){
     if(nowP==5){setTimeout(function(){
      list.style.transition="left 0s";
     list.style.left = "-500px"; 
     nowP = 1;},speed*1000);} //当到达图片表右边缘时与动画同步切换 
    list.style.transition = "left "+speed+"s";
    move(-500);
    nowP++;
    judge = null;
   },speed*1000);
  }

 };

 function move(num){
  var term = parseInt(list.style.left) + num ; 
  list.style.left = term+"px";
 }

 var roll= setInterval(function(){
  next.onclick();
 },2000);

 container.onmouseenter=function(){
  clearInterval(roll);
 };

 container.onmouseleave=function()
  {
  roll=setInterval(function(){
  next.onclick();
  },2000);
 };

 
};

下面是一个演示demo,简单来说原理就是在切换到图片表首和表尾的动画开始时,设置一个延迟执行时间与动画过渡时间相同的setTimeout函数来执行瞬间切换,再通过节流来保证最大的切换速度(speed)。

本人也是初学前端,如果有帮助的话,点一下推荐吧

实现图片首尾平滑轮播(JS原生方法—节流)

以上这篇实现图片首尾平滑轮播(JS原生方法—节流)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一些实用的jQuery代码片段收集
Jul 12 Javascript
禁用Tab键JS代码兼容Firefox和IE
Apr 18 Javascript
div失去焦点事件实现思路
Apr 22 Javascript
浅谈JavaScript函数节流
Dec 09 Javascript
JavaScript插件化开发教程 (三)
Jan 27 Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 Javascript
javascript简单进制转换实现方法
Nov 24 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
Jan 17 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
vue 根据选择条件显示指定参数的例子
Nov 09 Javascript
JS代码实现页面切换效果
Jan 10 Javascript
打造通用的匀速运动框架(实例讲解)
Oct 17 #Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
Oct 17 #Javascript
Vue中封装input组件的实例详解
Oct 17 #Javascript
js获取文件里面的所有文件名(实例)
Oct 17 #Javascript
Vue中之nextTick函数源码分析详解
Oct 17 #Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
Oct 16 #Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 #jQuery
You might like
php中switch语句用法详解
2015/08/17 PHP
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
2016/05/13 PHP
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
javascript在事件监听方面的兼容性小结
2010/04/07 Javascript
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
2014/07/10 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
jQuery Ajax页面局部加载方法汇总
2016/06/02 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
2017/03/29 Javascript
layui导航栏实现代码
2017/05/19 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
2017/06/13 Javascript
解决vue-cli中stylus无法使用的问题方法
2017/06/19 Javascript
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片
2015/02/07 DOTA
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
python实现ID3决策树算法
2018/08/29 Python
python按照多个条件排序的方法
2019/02/08 Python
python 多线程对post请求服务器测试并发的方法
2019/06/13 Python
Django model.py表单设置默认值允许为空的操作
2020/05/19 Python
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
2015/10/22 面试题
销售助理岗位职责
2014/02/21 职场文书
体现团队精神的口号
2014/06/06 职场文书
关于运动会的口号
2014/06/07 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
人事代理委托书
2014/09/27 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js
Python 数据可视化之Bokeh详解
2021/11/02 Python