实现图片首尾平滑轮播(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 相关文章推荐
JavaScript 注册事件代码
Jan 27 Javascript
js中parseInt函数浅谈
Jul 31 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
Sep 28 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
Dec 26 Javascript
js点击选择文本的方法
Feb 09 Javascript
JavaScript制作简单分页插件
Sep 11 Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
jQuery操作事件完整实例分析
Jan 10 jQuery
js实现烟花特效
Mar 02 Javascript
JavaScript编写开发动态时钟
Jul 29 Javascript
浅谈es6中的元编程
Dec 01 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
在字符串中把网址改成超级链接
2006/10/09 PHP
ASP和PHP都是可以删除自身的
2007/04/09 PHP
php foreach 使用&amp;(与运算符)引用赋值要注意的问题
2010/02/16 PHP
探讨多键值cookie(php中cookie存取数组)的详解
2013/06/06 PHP
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
PHP文件操作方法汇总
2015/07/01 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
js操作textarea 常用方法总结
2012/12/03 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
jQuery编写网页版2048小游戏
2017/01/06 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
2017/01/19 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
Bootstrap模态框插入视频的实现代码
2017/06/25 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
Python中针对函数处理的特殊方法
2014/03/06 Python
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
python实现的系统实用log类实例
2015/06/30 Python
Python中的descriptor描述器简明使用指南
2016/06/02 Python
python自动生成model文件过程详解
2019/11/02 Python
解决IDEA 的 plugins 搜不到任何的插件问题
2020/05/04 Python
几款好用的python工具库(小结)
2020/10/20 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
《学棋》教后反思
2014/04/14 职场文书
五一晚会主持词
2015/07/01 职场文书
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL