实现图片首尾平滑轮播(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 相关文章推荐
xml和web特殊字符
Apr 28 Javascript
jsTree树控件(基于jQuery, 超强悍)[推荐]
Sep 01 Javascript
基于Jquery的淡入淡出的特效基础练习
Dec 13 Javascript
JS编程小常识很有用
Nov 26 Javascript
JavaScript从数组中删除指定值元素的方法
Mar 18 Javascript
jquery获取所有选中的checkbox实现代码
May 26 Javascript
Zepto实现密码的隐藏/显示
Apr 07 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
React教程之封装一个Portal可复用组件的方法
Jan 02 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
在node中使用jwt签发与验证token的方法
Apr 03 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
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
PHP函数http_build_query使用详解
2014/08/20 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
php简单压缩css样式示例
2016/09/22 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
一个多次搜索+多次传值的解决方案
2007/01/20 Javascript
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
2013/09/09 Javascript
JS读取XML文件示例代码
2013/11/15 Javascript
JS可以控制样式的名称写法一览
2014/01/16 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
移动端js图片查看器
2016/11/17 Javascript
使用jQuery 操作table 完成单元格合并的实例
2017/12/27 jQuery
如何优雅地取消 JavaScript 异步任务
2020/03/22 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
浅谈python中的面向对象和类的基本语法
2016/06/13 Python
使用python和pygame绘制繁花曲线的方法
2018/02/24 Python
python3中zip()函数使用详解
2018/06/29 Python
Python实现程序判断季节的代码示例
2019/01/28 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
Python tkinter和exe打包的方法
2020/02/05 Python
Python with语句用法原理详解
2020/07/03 Python
基于HTML5 Canvas 实现商场监控实例详解
2017/11/20 HTML / CSS
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
2019/08/05 HTML / CSS
合同专员岗位职责
2013/12/18 职场文书
遗体告别仪式答谢词
2014/01/23 职场文书
有关环保的标语
2014/06/13 职场文书
机电一体化专业求职信
2014/07/22 职场文书
2014法制宣传日活动总结范文
2014/11/01 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
创先争优承诺书
2015/01/20 职场文书
银行稽核岗位职责
2015/04/13 职场文书