图片首尾平滑轮播(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:在调用元 ...
随机推荐
- 结对作业1----基于flask框架的四则运算生成器
011.012结对作业 coding地址:https://coding.net/u/nikochan/p/2nd_SE/git 一.作业描述 由于上次作业我没有按时完成,而且庞伊凡同学编程能力超棒,所 ...
- 团队项目汇总beta
一.Daily Scrum Meeting[Alpha] 4.23-第一天 4.24-第二天 4.25-第三天 4.26-第四天 4.27-第五天 4.28-第六天 4.29-第七天 二.Daily ...
- ERROR: JDWP Unable to get JNI 1.2 environment, jvm->GetEnv() return code = -2
java编程时偶尔出现运行结果下面这样的错误: ERROR: JDWP Unable to get JNI 1.2 environment, jvm->GetEnv() return code ...
- 201521123040《Java程序设计》第14周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...
- geyear和getfullyear的区别
getYear(),IE中获得正确年份,但有的浏览器获取的是当前年份-1900的值.而IE是当大于2000时,直接加上1900 getFullYear(),都是可以获得正确年份. 所以建议使用getF ...
- bom是什么？
- oracle客户端plsql设置字符集
感谢一个新朋友的到来,我帮他的过程中有好些东西都不怎么想的起来了,所以从现在起我需要记录下每一点一滴, 因为我觉得写下来的东西才不会丢,而且欢迎以后的朋友到来. 使用plsql查数据的时候有时候中文会 ...
- c#中的格式输出
Reference:http://blog.csdn.net/fightfaith/article/details/48137235
- [SDOI2009]HH的项链解题报告
原题目:洛谷P1972 题目描述 HH 有一串由各种漂亮的贝壳组成的项链.HH 相信不同的贝壳会带来好运,所以每次散步完后,他都会随意取出一段贝壳,思考它们所表达的含义.HH 不断地收集新的贝壳,因此 ...
- 数据库服务器构建和部署列表(For SQL Server 2012)
前言 我们可能经常安装和部署数据库服务器,但是可能突然忘记了某个设置,为后来的运维造成隐患.下面是国外大牛整理的的检查列表. 其实也包含了很多我们平时数据库配置的最佳实践.比如TEMPDB 文件的个数 ...