实现图片首尾平滑轮播(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 Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
JavaScript 核心参考教程 内置对象
Oct 13 Javascript
jQuery.getScript加载同域JS的代码
Feb 13 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
jquery sortable的拖动方法示例详解
Jan 16 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
webpack进阶——缓存与独立打包的用法
Aug 02 Javascript
Vue实战之vue登录验证的实现代码
Oct 31 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
对vue事件的延迟执行实例讲解
Aug 28 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实现登陆验证码(类似条行码状)
2006/10/09 PHP
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
javascript不同页面传值的改进版
2008/09/30 Javascript
匹配任意字符的正则表达式写法
2010/04/29 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
关于js里的this关键字的理解
2015/08/17 Javascript
简单理解vue中el、template、replace元素
2016/10/27 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
用iframe实现不刷新整个页面上传图片的实例
2016/11/18 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
python程序封装为win32服务的方法
2021/03/07 Python
10 分钟快速入门 Python3的教程
2019/01/29 Python
python多进程并行代码实例
2019/09/30 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
python实现贪吃蛇双人大战
2020/04/18 Python
浅谈python锁与死锁问题
2020/08/14 Python
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
人事科岗位职责范本
2014/03/02 职场文书
2015秋季开学典礼主持词
2015/07/16 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书
导游词之南京中山陵
2019/11/27 职场文书
python scipy 稀疏矩阵的使用说明
2021/05/26 Python
Python数据类型最全知识总结
2021/05/31 Python
Jpa Specification如何实现and和or同时使用查询
2021/11/23 Java/Android
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技