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. 配置NFS服务器

    一.配置NFS服务器 1.安装软件包 [root@wjb10000 ~]# yum -y install nfs-utils.x86_64 2.修改配置文件[root@wjb10000 ~]# vim ...

  2. Oracle按用户进行统计信息更新

    按用户进行统计信息更新 PL/sqldev工具使用system用户连接到oracle,打开命令窗口执行以下SQL,用户名请根据实际情况进行更改: begin dbms_stats.gather_sch ...

  3. PHP的魔术方法（简介）

    public void _set(string $name,mixed $value) public mixed _get(string $name) public bool _isset(strin ...

  4. 《photoshop cc 新功能 生成图像资源》智能切图逆天啦！

    作为一个前端工程师切图这个步骤是必不可少的,方式多种多样,有和切图工具的,也有是把要切的图层元素或者组直接新建保存成文件的,现在photoshop cc2015,可以让你轻松切图,摆脱繁琐的切图步骤. ...

  5. N!水题

    //题目是求N!的问题,思路:设定一个整形数组来存放每次计算过后的值 有两个for循环,第一个for循环每次加进一个数 然后在第二个for循环里面计算出此时的阶乘,比如9999,先给出i=2 在第二个 ...

  6. WindowsServer2012 取消密码策略

    1.打开“组策略管理”界面:管理工具 >> 组策略管理,如果找不到该功能,则需要先安装,在“服务管理器”里面“添加新功能”.(或者:开始——运行——gpmc.msc) 2.依次打开“林”& ...

  7. congos 日期控件的简单使用

    congos 添加html的标签,然后写上js的代码,这段代码的功能是得到前一天的日期. <input type="button" value="查询" ...

  8. 沙盒操作的核心函数 - NSSearchPathForDirectoriesInDomains用法

    1. iPhone会为每一个应用程序生成一个私有目录,这个目录位于: /Users/sundfsun2009/Library/Application Support/iPhone Simulator/ ...

  9. POJ 3254 状压DP

    题目大意: 一个农民有一片n行m列 的农场   n和m 范围[1,12]  对于每一块土地 ,1代表可以种地,0代表不能种. 因为农夫要种草喂牛,牛吃草不能挨着,所以农夫种菜的每一块都不能有公共边. ...

  10. JS函数定义与匿名函数的调用

    一.函数声明.函数表达式.匿名函数 函数声明:function fnName () {…};使用function关键字 声明一个函数,再指定一个函数名,叫函数声明. 函数表达式 var fnName ...