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. C#截图操作方法大全

    using System.Drawing; using System.Windows.Forms; namespace WindowsFormsApplication1 { class ScreenC ...

  2. bootsrtap (-)

    1.text-muted:提示,使用浅灰色(#999).text-primary:主要,使用蓝色(#428bca).text-success:成功,使用浅绿色(#3c763d).text-info:通 ...

  3. Asp.net笔记（1）

    1.下拉框,列表,下拉列表 下拉框其实是HTML的知识,在这里就是在复习一下: <select id="select1" runat="server"&g ...

  4. file控件change事件触发问题

    最近,项目中需要用到一个图片上传的功能,我用的file控件来选取图片文件,然后利用js读取文件来预览图片,最后再根据用户的操作来决定是否上传文件. 其中碰到了一个奇怪的问题:在选取完第一张图片,并上传 ...

  5. hibernate注解原理

    持续更新中.. hibernate注解用的是java注解,用到的是java反射机制.

  6. (转)ASP.NET里面简单的记住用户名和密码

    using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using S ...

  7. linux性能分析命令top

    发布时间: 2013-12-14浏览次数:154分类: 服务器 top是linux最常用的性能分析工具了,它是个交互式工具,提供系统的整体性能,如正在执行的进程信息包括进程ID,内存占用率,CPU占用 ...

  8. 如何在github上传自己的项目

    1.首先在github创建自己的账号. 2.下载github for windows 客户端 (备注:这里我的电脑是windows系统的) ,不要下载错了,网上下载的应该是这样的安装程序 3.安装gi ...

  9. MYSQL注释

    MYSQL扩展了SQL的注释/**/, /*! (语句)#加感叹号,内部语句会被执行 */ /*!50001 select * from test #表示数据库为5.00.01版本,内部语句会被执行 ...

  10. 002_系统表查询（sysdatabases等）

    002_系统表查询(sysdatabases等) --1.获取所有数据库名: SELECT Name FROM Master..SysDatabases ORDER BY Name --2.获取所有表 ...