图片首尾平滑轮播(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:在调用元 ...
随机推荐
- Git 指南 -- 什么应该被纳入管理？
Git 指南 -- 什么应该被纳入管理? 如果还不了解Git是什么,可以先阅读这篇博文:http://www.cnblogs.com/schaepher/p/5561193.html 是作品,而不是产 ...
- spring 注入使用注解（不用xml）
(一):导入spring4的jar包 (二):在xml中配置扫描的包 <context:component-scan base-package="entity">< ...
- 自定义win8资源管理器左侧导航窗格的方法
Win8自定义资源管理器左侧导航窗格: 快捷键Win+R – 输入regedit: 删除“网络”项目 HKEY_CLASSES_ROOTCLSID{F02C1A0D-BE21-4350-88B0-73 ...
- 201521123089《Java程序设计》第14周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 1.数据库:为了实现一定目的按某中规划组织起来的"数据"的"集合". 2 ...
- 【Socket编程】通过Socket实现UDP编程
通过Socket实现UDP编程 UDP通信: 1.UDP协议(用户数据报协议)是无连接.不可靠.无序的. 2.UDP协议以数据报作为数据传输的载体. 3.使用UDP进行数据传输时,首先需要将要传输的数 ...
- 根据HttpServletRequest获取用户真实IP地址
原因: 当我们通过request获取客户端IP时,自身服务器通常会为了保护信息或者负载均衡的目的,对自身服务器做反向代理.此时如果我们通过request.getRemoteAddr();可能获取到的是 ...
- JavaSE（十二）之IO流的字节流（一）
前面我们学习的了多线程,今天开始要学习IO流了,java中IO流的知识非常重要.但是其实并不难,因为他们都有固定的套路. 一.流的概念 流是个抽象的概念,是对输入输出设备的抽象,Java程序中 ...
- 【SQL】- 基础知识梳理（四） - 存储过程
存储过程的概念 存储过程Procedure是一组为了完成特定功能的SQL语句集合,经编译后存储在数据库中,用户通过指定存储过程的名称并给出参数来执行 存储过程的好处 A. 存储过程允许标准组件式编程 ...
- [Node.js] 2、利用node-git-server快速搭建git服务器
本文用到了node-git-server 1.检测本地git版本 该包的使用需要机器上本来就安装git,且git的版本大于等于2.7: ╭─root@lt /home/workspace ╰─# gi ...
- uva1267 Network
https://vjudge.net/problem/UVA-1267 题意: 有一棵树,上面有一个放着水源的点s,给出一个数k,这个水源可以覆盖路径长度到s不超过k的叶子节点.现在需要把所有的叶子节 ...