实现图片首尾平滑轮播(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 相关文章推荐
Firefox 无法获取cssRules 的解决办法
Oct 11 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
Dec 16 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
Feb 25 Javascript
3种js实现string的substring方法
Nov 09 Javascript
js表单验证实例讲解
Mar 31 Javascript
在IE8上JS实现combobox支持拼音检索功能
May 23 Javascript
微信小程序图片横向左右滑动案例
May 19 Javascript
ES6正则表达式扩展笔记
Jul 25 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 Javascript
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
打造通用的匀速运动框架(实例讲解)
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在字符串中查找指定字符串并删除的代码
2008/10/02 PHP
php SQL Injection with MySQL
2011/02/27 PHP
PHP使用自定义方法实现数组合并示例
2016/07/07 PHP
PHP回调函数概念与用法实例分析
2017/11/03 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
JS实现的碰撞检测与周期移动完整示例
2019/09/02 Javascript
使用python 获取进程pid号的方法
2014/03/10 Python
Python中的列表知识点汇总
2015/04/14 Python
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
Django实现发送邮件功能
2019/07/18 Python
Python3 操作 MySQL 插入一条数据并返回主键 id的实例
2020/03/02 Python
Python 里最强的地图绘制神器
2021/03/01 Python
HTML5 Canvas像素处理使用接口介绍
2012/12/02 HTML / CSS
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
美国五金商店:Ace Hardware
2018/03/27 全球购物
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
医学生实习自荐信
2013/10/01 职场文书
法学毕业生自荐信
2013/11/13 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
家长通知书家长评语
2014/04/17 职场文书
2014最新房贷收入证明范本
2014/09/12 职场文书
2015年端午节国旗下演讲稿
2015/03/19 职场文书
2015学校图书管理员工作总结
2015/05/11 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
幼儿园2016年圣诞活动总结
2016/03/31 职场文书
golang 实用库gotable的具体使用
2021/07/01 Golang
如何使用python包中的sched事件调度器
2022/04/30 Python