实现图片首尾平滑轮播(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编程中容易出BUG的几点小知识
Jan 31 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 Javascript
浅谈jQuery.easyui的datebox格式化时间
Jun 25 Javascript
js实现上传图片及时预览
May 07 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
May 28 Javascript
JavaScript解八皇后问题的方法总结
Jun 12 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
Nov 18 Javascript
巧用canvas
Jan 21 Javascript
JavaScript模块详解
Dec 18 Javascript
JS实现的透明度渐变动画效果示例
Apr 28 Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 Javascript
Vue实现固定定位图标滑动隐藏效果
May 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
特转载一高手总结PHP学习资源和链接.
2006/12/05 PHP
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
生成php程序的php代码
2008/04/07 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
Linux系统下使用XHProf和XHGui分析PHP运行性能
2015/12/08 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
2019/12/04 PHP
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
jquery 淡入淡出效果的简单实现
2014/02/07 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
详解Angularjs中的依赖注入
2016/03/11 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
2017/03/30 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
JavaScript输出所选择起始与结束日期的方法
2017/07/12 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
2018/06/10 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
对pandas通过索引提取dataframe的行方法详解
2019/02/01 Python
python 进程池pool使用详解
2020/10/15 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
2016/03/14 HTML / CSS
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
娇韵诗Clarins意大利官方网站:法国天然护肤品牌
2020/03/11 全球购物
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
财务会计专业毕业生自荐信
2013/10/19 职场文书
财务总监岗位职责
2014/03/07 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
大学新生军训自我鉴定范文
2014/09/13 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
工人先进事迹材料
2014/12/26 职场文书
2015年社区创卫工作总结
2015/04/21 职场文书