1，效果图

https://ga20.github.io/slider/

2，原理图

分三步：

将视口元素设置overflow:hidden

将其图片子元素设置float:left

让橙色的框（包裹）滑动起来

3，具体细节

　　写出滑动函数，通过图片索引值的差来判断左滑还是右滑，索引值的差*图片宽度等于滑动距离

4，遇到的问题

　　当前页面失去焦点之后，浏览器会缓存动画，但是setInterval会继续执行，导致过一会切回页面的时候动画混乱

　　具体做法是：

　　　　　　通过window的onblur和onfocus来改变一个标志，来控制自动滑动函数的执行

源码：https://github.com/ga20/slider

转载请注明出处，谢谢

原生js实现轮播的更多相关文章

  1. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  2. 原生js实现轮播图

    原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...

  3. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  4. 原生JS实现轮播图的效果

    原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...

  5. 使用原生js将轮播图组件化

    代码地址如下:http://www.demodashi.com/demo/11316.html   这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...

  6. 用原生js封装轮播图

    原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...

  7. 原生js焦点轮播图的实现

    继续学习打卡,武汉加油,逆战必胜!今日咱们主要探讨一下原生js写轮播图的问题, 简单解析一下思路: 1,首先写好css样式问题 2,考虑全局变量:自动播放的定时器,以及记录图片位置的角标Index 2 ...

  8. 原生JS实现轮播+学前端的感受（防止走火入魔）

    插件!插件!天天听到有人求这个插件,那个插件的,当然,用第三方插件可以大幅提高开发效率,但作为新手,我还是喜欢自己来实现,主要是我有时间! 今天我来给大家分享下用原生JS实现图片轮播的写法 前辈们可以 ...

  9. 原生js封装轮播图

    个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用,如果也适用其他人请随意拿走勿喷就行! 原生js对于思路要求比较高,在js代码我都写有备注,足够理解并使用,即使是小白或者刚入行的程序员也比 ...

  10. 原生JS设计轮播图

    一.效果预览: 由于只能上传2M以下的图片,这里只截取了自动切换的效果: 二.编写语言 HTML.CSS.原生JS 三.编写思路 (一)HTML部分 1..slide意为滑槽,里面存放所有图片: 2. ...

随机推荐

  1. 使用Httpwatch分析响应时间--转

    时间片段名称 意思 Blocked (阻塞)灰色 阻塞的时间主要包括,预处理时间,(如缓存查找)和网络排队等待的时间,导致阻塞最主要的原因是下载页面中的图片 DNS Lookup(域名解释)紫色 域名 ...

  2. Android开发中，有哪些让你觉得相见恨晚的方法、类或接口？

    ThumbnailUtils.extractThumbnail(bitmap, width, height); 压缩图片到指定大小的方法,以前都是一次次的createbitmap,然后用matrix去 ...

  3. SparseArray HashMap 稀疏数组 二分法

    简介 HashMap是java里比较常用的一个集合类,我们常用其来缓存一些处理后的结果,但是在Android项目中,Eclipse却给出了一个 performance 警告.意思就是说用SparseA ...

  4. GSON 简介 示例

    Gson简介 目前解析json最常用的三种工具:org.json(Java常用的解析),fastjson(阿里巴巴出的),Gson(Google出的),解析速度最快的是Gson. Gson的全名为Go ...

  5. 第1章 你真的了解C#吗？

    什么是C#? C#是由微软公司开发的一种面向对象且运行于.Net Framework之上的高级程序设计语言,发布于2000年6月. 什么是.Net Framework 我们可以这样去理解.Net Fr ...

  6. .net 中序列化和反序列化的使用

    序列化的目的:将对象状态转换为可保持或传输的格式的过程.与序列化相对的是反序列化,它将流转换为对象.这两个过程结合起来,可以轻松地存储和传输数据. 序列化 序列化分为JSON 序列化,XML序列化,二 ...

  7. MyEclipse Web Project导入Eclipse Dynamic Web Project，无法部署到tomcat问 题

    做作业遇到一个小问题,将MyEclipse Web Project导入到Eclipse中开发.在部署到tomcat时,发现无法发布这个项目. 问题分析: MyEclipse Web Project被识 ...

  8. 第一个androidAPP项目总结—数据请求

    1.使用 ShenBuLuoHttpImpl.getMHttpImpl(context).getAddressList(mod.getCouponCode(), new HttpAfter() { @ ...

  9. Nagios监控memcached

    下载地址: http://search.cpan.org/CPAN/authors/id/Z/ZI/ZIGOROU/Nagios-Plugins-Memcached-0.02.tar.gz http: ...

  10. 武汉科技大学ACM：1001: 猴子选大王

    Problem Description n只猴子要选大王,选举方法如下:所有猴子按 1,2 ……… n 编号并按照顺序围成一圈,从第 k 个猴子起,由1开始报数,报到m时,该猴子就跳出圈外,下一只猴子 ...