图片首尾平滑轮播(JS原生方法—节流)<原创>
首先给出HTML代码，要注意轮播图片表(#list)末尾加上第一个图片1.jpg，在首部加上最后一个图片5.jpg。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首尾轮播</title>
<link rel="stylesheet" href="首尾轮播.css">
<script src="首尾轮播.js"></script>
</head>
<body>
<div id="container">
<div id="list" style="left: -500px">
<div><a href="#"><img src="../imgs/5.jpg" alt=""></a></div>
<div><a href="#"><img src="../imgs/1.jpg" alt=""></a></div>
<div><a href="#"><img src="../imgs/2.jpg" alt=""></a></div>
<div><a href="#"><img src="../imgs/3.jpg" alt=""></a></div>
<div><a href="#"><img src="../imgs/4.jpg" alt=""></a></div>
<div><a href="#"><img src="../imgs/5.jpg" alt=""></a></div>
<div><a href="#"><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:;
padding:;
}
#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:;
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)。
节流的原理我是参考的以下两位元老的文章：
阮一峰Javascript标准参考教程(事件类型scroll事件小结)
mqyqing.fengJavaScript专题之跟着 underscore 学节流.Github
本人也是初学前端，如果有帮助的话，点一下推荐吧
图片首尾平滑轮播(JS原生方法—节流)<原创>的更多相关文章
- js 原生方法获取所有兄弟节点
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- JS原生方法实现瀑布流布局
html部分(图片都是本地,自己需要改动图片) p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec ...
- js原生图片懒加载 或 js原生图片预加载，html标签自定义属性
使用原声js来实现图片预加载,或图片懒加载,小伙伴们可以根据项目需要来结合vue或者是react来进行修改. 一.什么是图片懒加载或什么是图片预加载 当访问一个页面的时候,先把img元素或是其他元素的 ...
- JS原生方法实现jQuery的ready()
浏览器加载页面的顺序: 1. 解析HTML结构 2. 加载外部脚本和样式表文件 3. 解析并执行脚本代码 4. 构造HTML DOM模型==ready() 5. 加载图片等组件 6. 页面加载完毕== ...
- 像jq那样获取对象的js原生方法
使用过jq的童鞋非常喜欢jq获取对象的方法,只要$()就可以获取,在此我封装一个js获取对象的方法 [注意]只对chrome,Firefox,opera,Safari,ie8及ie8以上版本有效 fu ...
- JS原生方法被覆盖后的恢复办法
alert 被覆盖 今天装修博客园,调试了下JS代码发现 alert() 方法被官方覆盖了,查看源码得知 alert 的功能被替换成了 console.log. 恢复 var _frame = doc ...
- 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
在写代码的时候,经常会用到懒加载的模式,以前是通过window.onload的模式去加载,但是图片很多或者用ajax请求的时候,就会很麻烦,现在用lazyload的模式加载方便很多 <!doct ...
- js原生方法传参的细节（面试必问）
废话不说,直接上题. slice(),接收两个参数,第一个为开始index(从0开始),第二个为结束的index(也是从0开始,但是不包括index本身,只到index-1).返回值是截取的数组,原数 ...
- 【笔记】js原生方法 在元素外部或内部实现添加元素功能（类似jq 的 insert 和 append）
介绍的这个方法是:insetAdjacentHTML() 方法 此方法接收两个参数: 第一个参数必为下列值: beforebegin:在调用的元素外部的前面添加一个目标元素 afterend:在调用元 ...
随机推荐
- 团队作业7---Alpha冲刺之事后诸葛亮
一.设想与目标 1.我们的软件要解决什么问题? 我们的软件主要是帮助老师解决通过博客地址收集博客的相关信息来对学生对课程的认真与努力程度进行评定的问题,主要就是根据采集到的各项博客数据作为评分项,构建 ...
- 团队作业9——测试与发布（Beta版本）（含展示博客）
团队作业9--测试与发布(Beta版) http://www.cnblogs.com/newteam6/p/6938504.html 团队作业9--展示博客 http://www.cnblogs.co ...
- 201521123061 《Java程序设计》第七周学习总结
201521123061 <Java程序设计>第七周学习总结 1. 本周学习总结 2. 书面作业 ArrayList代码分析 1.1 解释ArrayList的contains源代码 贴上源 ...
- 201521123059 《Java程序设计》第五周学习总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 1.Comparable与Arrays.sort,其功能是对指定对象数组按升序进 ...
- 201521123037 《Java程序设计》第2周学习总结
1. 本周学习总结 初步学会分析使用命令提示符进行编译的命令 了解使用import引入不同包的类 学会码云与eclipse的连接 使用Array和String函数编写程序 2. 书面作业 1. 使用E ...
- 【DDD】业务建模实践 —— 删除帖子
本文是基于上一篇‘业务建模战术’的实践,主要讲解‘删除帖子’场景的业务建模,包括:业务建模.业务模型.示例代码:示例代码会使用java编写,文末附有github地址.相比于<领域驱动设计> ...
- JDBC中的ResultSet无法多次循环的问题。
前几天碰见了一个很奇葩的问题,使我百思不得其解,今天就写一下我遇见的问题吧,也供大家参考,别和我犯同样的毛病. 首先说下jdbc,jdbc是java是一种用于执行SQL语句的Java API,从jdb ...
- mysql truncate、delete与drop区别
相同点: 1.truncate和不带where子句的delete.以及drop都会删除表内的数据. 2.drop.truncate都是DDL语句(数据定义语言),执行后会自动提交. 不同点: 1. t ...
- SharedPreferences的使用
- Python 接口测试（二）
三:http状态码含义(来源于w3school): 状态码: 1xx: 信息 消息: 描述: 100 Continue 服务器仅接收到部分请求,但是一旦服务器并没有拒绝该请求,客 ...