实现图片首尾平滑轮播(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 注意事项与常用语法小结
Jun 07 Javascript
基于jquery的跟随屏幕滚动代码
Jul 24 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
Aug 30 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
浅析JavaScript基本类型与引用类型
May 28 Javascript
Javascript中this的用法详解
Sep 22 Javascript
jquery插件Jplayer使用方法简析
Apr 22 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
Jul 25 Javascript
vue-resourse将json数据输出实例
Mar 08 Javascript
js实现随机数字字母验证码
Jun 19 Javascript
Vue vm.$attrs使用场景详解
Mar 08 Javascript
在Vue里如何把网页的数据导出到Excel的方法
Sep 30 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
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
ThinkPHP控制器详解
2015/07/27 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
JavaScript代码复用模式实例分析
2012/12/02 Javascript
百度地图api应用标注地理位置信息(js版)
2013/02/01 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
JS模板实现方法
2013/04/03 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
详解NodeJs支付宝移动支付签名及验签
2017/01/06 NodeJs
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
全选复选框JavaScript编写小结(附代码)
2017/08/16 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
python之Character string(实例讲解)
2017/09/25 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
使用python将大量数据导出到Excel中的小技巧分享
2018/06/14 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
Python流程控制 while循环实现解析
2019/09/02 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
Python OpenCV读取中文路径图像的方法
2020/07/02 Python
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
捷科时代的软件测试笔试题
2015/11/09 面试题
财务人员个人求职信范文
2013/12/04 职场文书
护士实习生自我鉴定范文
2013/12/10 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书
导游词之广州陈家祠
2019/10/21 职场文书
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python