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. Linux下查看显示器输出状态以及修改显示器工作模式(复制 or 扩展)

    //关闭显示器VGA1xrandr --output VGA1 --off //开启显示器VGA1xrandr --output VGA1 --auto //关闭显示器LVDS1xrandr --ou ...

  2. 2015 UESTC Winter Training #6【Regionals 2010 >> North America - Rocky Mountain】

    2015 UESTC Winter Training #6 Regionals 2010 >> North America - Rocky Mountain A - Parenthesis ...

  3. Config配置文件读写

    config文件读写操作(文字说明附加在程序中) App.config文件 <?xml version="1.0" encoding="utf-8" ?& ...

  4. WPF自定义Main函数

    第一步:在app.xaml.cs里加入以下代码: [STAThread] public static void Main(string[] args) { App app = new App(); a ...

  5. 武汉科技大学ACM ：1010: 零起点学算法12——求2个日期之间的天数

    Problem Description 水题 Input 输入2个日期,日期按照年月日,年月日之间用符号-隔开(题目包含多组数据) Output 求出这2个日期之间的天数(不包括自身),每组测试数据一 ...

  6. JNDI Tutorial

    Naming Concepts A fundamental facility in any computing system is the naming service--the means by w ...

  7. jQuery自学笔记（二）：jQuery选择器

    一.简单选择器 ID选择器:$('#box') 元素标签名:$('div') 类选择器:$('.box') jQuery提供了length和size()两种方法查看返回的元素,可验证ID在页面只出现一 ...

  8. SQL服务器名称更改

    引用地址:http://blog.sina.com.cn/s/blog_6c9f8a0501016s3p.html 1.使用select @@ServerName可以看到当前数据库的服务器名 2.从S ...

  9. js 邮箱正则匹配

    $(function(){ var valAttr = '746979855qq.com'; \-])+\.)+([a-zA-Z0-]{,})+$/; var tmpresult = mail_fil ...

  10. php与http协议

    1.预定义变量$_SERVER     $_SERVER 是一个包含了诸如头信息(header).路径(path).以及脚本位置(script locations)等等信息的数组. 可以再后台输出 f ...