实现图片首尾平滑轮播(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 相关文章推荐
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
一些易混淆且不常用的属性,希望有用
Jan 29 Javascript
jQuery 三击事件实现代码
Sep 11 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 Javascript
vue params、query传参使用详解
Sep 12 Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
js中如何完美的解析数据
Mar 18 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
Nov 25 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
Feb 14 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自动获取目录下的模板的代码
2010/08/08 PHP
php设计模式 Observer(观察者模式)
2011/06/26 PHP
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
DHTML 中的绝对定位
2006/11/26 Javascript
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
基于Jquery的实现回车键Enter切换焦点
2010/09/14 Javascript
jQuery学习基础知识小结
2010/11/25 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
2013/04/16 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
2016/05/31 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
vue.js select下拉框绑定和取值方法
2018/03/03 Javascript
JS实现的JSON数组去重算法示例
2018/04/11 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
Python实现的二维码生成小软件
2014/07/11 Python
在Python程序中操作MySQL的基本方法
2015/07/29 Python
python编程开发之日期操作实例分析
2015/11/13 Python
python3监控CentOS磁盘空间脚本
2018/06/21 Python
flask中的wtforms使用方法
2018/07/21 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
五种Python转义表示法
2020/11/27 Python
详解Python 中的 defaultdict 数据类型
2021/02/22 Python
纯CSS改变webkit内核浏览器的滚动条样式
2014/04/17 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
2010/07/20 HTML / CSS
缅甸网上购物:Shop.com.mm
2017/12/05 全球购物
Noon埃及:埃及在线购物
2019/11/26 全球购物
施工安全协议书范本
2014/09/26 职场文书