项目要求页面兼容IE6,7,8等浏览器，我们可能会遇到这个轮播效果，轮播板块要求：无限循环、自动轮播和手动切换功能，每一次滚动一小格，网上有很多这类插件，例如:swiper等！

但是很多都是不兼容IE6,7,8这些低级浏览器的，没有办法，只能自己写一个类似的轮播插件

废话不多说，直接上代码

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <script type="text/javascript" src="js/jquery-1.8.3-20180801.min.js"></script>

         <style>

             *{margin: ;padding: ;}

             div{position: relative;width: 1000px;overflow: hidden;height: 100px;line-height:100px;}

             ul{position: absolute;list-style: none;overflow: hidden;}

             li{float: left;width: 200px;height: 100px;text-align:center;color:#fff;}

             a{position: absolute;color:#fff;margin: 10px;font-size:30px;text-decoration:none;}

         </style>

     </head>

     <body>

         <div>

             <ul>

                 <li style="background: red;"></li>

                 <li style="background: yellow;"></li>

                 <li style="background: blue;"></li>

                 <li style="background: black;"></li>

                 <li style="background: green;"></li>

                 <li style="background: orange;"></li>

                 <li style="background: skyblue;"></li>

                 <li style="background: blue;"></li>

                 <li style="background: green;"></li>

                 <li style="background: orange;"></li>

                 <li style="background: skyblue;"></li>

             </ul>

             <a href="javascript:void(0)" class="prev" style="left:0px;">←</a>

             <a href="javascript:void(0)" class="next" style="right:0px;">→</a>

         </div>

     </body>

     <script type="text/javascript">

         var fli = $("ul li").clone(true);

         var oul = $("ul");

         oul.append(fli);

         oul.width($("ul li").eq().width()*$("ul li").length);

         var inow = ;

         var timer = null;

         $("div").mouseover(function(){

             clearInterval(timer);

         })

         $("div").mouseout(function(){

             autoplay();

         })

         $(".next").click(function(){

             if(inow == $("ul li").length/){

                 oul.css("left","0px");

                 inow = ;

             }else{

                 inow++;

             }

             var leng = -inow*$("ul li").eq().width()+"px";

             oul.animate({"left":leng});

         })

         $(".prev").click(function(){

             if(inow == ){

                 var ml = -$("ul li").eq().width()*($("ul li").length/)+"px";

                 oul.css("left",ml);

                 inow = $("ul li").length/-;

             }else{

                 inow--;

             }

             var leng = -inow*$("ul li").eq().width()+"px";

             oul.animate({"left":leng});

         })

         function autoplay(){

                 timer = setInterval(function(){

                 if(inow == $("ul li").length/){

                     oul.css("left","0px");

                     inow = ;

                 }else{

                     inow++;

                 }

                 console.log(inow);

                 var leng = -inow*$("ul li").eq().width()+"px";

                 oul.animate({"left":leng});

             },);

         }

         autoplay();

     </script>

 </html>

希望这篇文章能帮到大家，喜欢技术交流的可以关注我，一起交流前端技术。

原生JS编写兼容IE6,7,8浏览器无缝自动轮播(带按钮切换)的更多相关文章

  1. 轮播插件、原生js编写，弄懂这个，基本上各种轮播都可以自己写了

    直接上代码了: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  2. 关于错位动画的练习，原生js编写

    最近在网上看到一个关于错位动画的文章,感觉非常有趣,便自己练习了一下,文章连接:http://www.w3cplus.com/animation/staggering-animations.html ...

  3. 3、js无缝滚动轮播

    另一个无缝滚动轮播,带暂停,由于js是异步,用C面向过程的思想开始会很怪异很怪异,因为当你定时器里面需要执行的函数时间比较长或是有一段延时时,异步的代码会完全不同,但习惯就好了. 这个代码有几个问题, ...

  4. html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器

    以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...

  5. 兼容IE6\7\8浏览器的html5标签的几个方案

    html5大行其道的时代已经到来.如果你还在等待浏览器兼容,说明你已经与web脱节几条街了.当然,这得益于移动客户端的蓬勃发展.如果还在纠结于,是否应该掌握html5和css3技术时,请狠狠的抽自己几 ...

  6. 原生js编写的安全色拾色器

    <html > <head> <meta http-equiv="Content-Type" content="text/html; cha ...

  7. 原生JS编写getByClass、addClass、removeClass、hasClass

    前言: 年后换了工作,在现在的公司写交互主要使用JS原生:刚刚入门前端的时候写交互一直用的原生JS,虽然用的不怎么样.后来去之前的公司之后,leader主张把jQuery用好,JS原生自然就熟练了:一 ...

  8. 原生JS简单的无缝自动轮播

    最近在不断的加强巩固js.在学习jq和vue之后发现很多东西其实都是不明所以,有些底层的东西自己不懂,到头来也只是一昧的使用,一直在用别人的东西,对自己的成长帮助也不大. 万丈高楼平地起,基础打扎实了 ...

  9. 原生js编写设为首页兼容ie、火狐和谷歌

    // JavaScript Document // 加入收藏 <a onclick="AddFavorite(window.location,document.title)" ...

随机推荐

  1. java + maven 实现发送短信验证码功能

    如何使用java + maven的项目环境发送短信验证码,本文使用的是榛子云短信 的接口. 1. 安装sdk 下载地址: http://smsow.zhenzikj.com/doc/sdk.html ...

  2. PTA第四次作业

    题目 7-1 计算职工工资 1.设计思路 (1)第一步:观察题意了解各个参数与所需函数在题目中的意义: 第二步:设计算法编写函数,让函数的功能实现题目中所需的功能: 第三步:运行程序检测是否错误. ( ...

  3. [lua][openresty]代码覆盖率检测的解决方式

    废话在前 什么是代码覆盖率 来自百度百科 代码覆盖(Code coverage)是软件测试中的一种度量,描述程式中源代码被测试的比例和程度,所得比例称为代码覆盖率. 开发人员为何关注? 在我们的开发过 ...

  4. Java web每天学之Servlet工作原理详情解析

    上篇文章中我们介绍了Servlet的实现方式以及Servlet的生命周期,我们这篇文章就来介绍一下常用对象. 点击回顾:<Java Web每天学之Servlet的工作原理解析>:<J ...

  5. Javascript高级编程学习笔记（86）—— Canvas(3)绘制矩形

    绘制矩形 矩形是唯一一种可以直接在2D上下文中绘制的形状. 与矩形有关的方法包括: fillRect() strokeRect() clearRect() 上述方法都接收四个参数: 绘制矩形的 X 坐 ...

  6. [Swift]LeetCode765. 情侣牵手 | Couples Holding Hands

    N couples sit in 2N seats arranged in a row and want to hold hands. We want to know the minimum numb ...

  7. 文本编辑器激活系列（一）：Sublime 安装、激活、汉化教程

    如您激活出现问题,请点击这里加入:软件激活问题解决群 前言 推荐几款文本编辑器: Sublime:内嵌python解释器.大量插件 EditPlus:语法着色.内嵌浏览器 Notepad++:所见即所 ...

  8. 「造个轮子」——设计 HTTP 请求全局上下文

    前言 本次 Cicada 已经更新到了 v1.0.3. 主要是解决了两个 issue,#9(Boss线程数好像设置有误 ) #8(怎么返回纯字符串内容不要JSON格式?). 所以本次的主要更新为: C ...

  9. 「造个轮子」——cicada(轻量级 WEB 框架)

    前言 俗话说 「不要重复造轮子」,关于是否有必要不再本次讨论范围. 创建这个项目的主要目的还是提升自己,看看和知名类开源项目的差距以及学习优秀的开源方式. 好了,现在着重来谈谈 cicada 这个项目 ...

  10. Docker技术知识点总结

    Docker技术知识点总结 本文宿主机环境Centos7.4Docker version 18.09.2, build 6247962采用国内 Daocloud 加速器---------------- ...