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

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

废话不多说，直接上代码

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title></title>
  6.          <script type="text/javascript" src="js/jquery-1.8.3-20180801.min.js"></script>
  7.          <style>
  8.              *{margin: ;padding: ;}
  9.              div{position: relative;width: 1000px;overflow: hidden;height: 100px;line-height:100px;}
  10.              ul{position: absolute;list-style: none;overflow: hidden;}
  11.              li{float: left;width: 200px;height: 100px;text-align:center;color:#fff;}
  12.              a{position: absolute;color:#fff;margin: 10px;font-size:30px;text-decoration:none;}
  13.          </style>
  14.      </head>
  15.      <body>
  16.          <div>
  17.              <ul>
  18.                  <li style="background: red;"></li>
  19.                  <li style="background: yellow;"></li>
  20.                  <li style="background: blue;"></li>
  21.                  <li style="background: black;"></li>
  22.                  <li style="background: green;"></li>
  23.                  <li style="background: orange;"></li>
  24.                  <li style="background: skyblue;"></li>
  25.                  <li style="background: blue;"></li>
  26.                  <li style="background: green;"></li>
  27.                  <li style="background: orange;"></li>
  28.                  <li style="background: skyblue;"></li>
  29.              </ul>
  30.              <a href="javascript:void(0)" class="prev" style="left:0px;">←</a>
  31.              <a href="javascript:void(0)" class="next" style="right:0px;">→</a>
  32.          </div>
  33.      </body>
  34.      <script type="text/javascript">
  35.          var fli = $("ul li").clone(true);
  36.          var oul = $("ul");
  37.          oul.append(fli);
  38.          oul.width($("ul li").eq().width()*$("ul li").length);
  39.          var inow = ;
  40.          var timer = null;
  41.  
  42.          $("div").mouseover(function(){
  43.              clearInterval(timer);
  44.          })
  45.          $("div").mouseout(function(){
  46.              autoplay();
  47.          })
  48.  
  49.          $(".next").click(function(){
  50.              if(inow == $("ul li").length/){
  51.                  oul.css("left","0px");
  52.                  inow = ;
  53.              }else{
  54.                  inow++;
  55.              }
  56.              var leng = -inow*$("ul li").eq().width()+"px";
  57.              oul.animate({"left":leng});
  58.          })
  59.          $(".prev").click(function(){
  60.              if(inow == ){
  61.                  var ml = -$("ul li").eq().width()*($("ul li").length/)+"px";
  62.                  oul.css("left",ml);
  63.                  inow = $("ul li").length/-;
  64.              }else{
  65.                  inow--;
  66.              }
  67.              var leng = -inow*$("ul li").eq().width()+"px";
  68.              oul.animate({"left":leng});
  69.          })
  70.          function autoplay(){
  71.                  timer = setInterval(function(){
  72.                  if(inow == $("ul li").length/){
  73.                      oul.css("left","0px");
  74.                      inow = ;
  75.                  }else{
  76.                      inow++;
  77.                  }
  78.                  console.log(inow);
  79.                  var leng = -inow*$("ul li").eq().width()+"px";
  80.                  oul.animate({"left":leng});
  81.              },);
  82.          }
  83.          autoplay();
  84.      </script>
  85.  </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. 封装一个 员工类 使用preparedStatement 查询数据 （2） 使用 arrayList 集合

    创建 员工=类生成 有参构造 get set 方法 toString 方法 package cn.hph; public class emp1 { //创建员工类的属性 private int id; ...

  2. Floyd算法解决多源最短路问题

    说好的写dijkstra 算法堆优化版本的,但是因为,妹子需要,我还是先把Floyd算法写一下吧!啦啦啦! 咳咳,还是说正事吧! ----------------------------------- ...

  3. Unbuntu 16.04 英文环境安装中文输入法

    ubuntu 16.04 使用的是ibus输入系统,没有预装中文输入法,你要自己安装一下.以中文拼音输入法为例:1.sudo apt install ibus-pinyin2.sudo apt ins ...

  4. 搭建Windows故障转移群集

    标签:SQL SERVER/MSSQL SERVER/数据库/DBA/windows 概述 本章内容主要讲述搭建windows故障转移群集 环境: 域服务器:windows server 2008 R ...

  5. Nginx限流配置

    电商平台营销时候,经常会碰到的大流量问题,除了做流量分流处理,可能还要做用户黑白名单.信誉分析,进而根据用户ip信誉权重做相应的流量拦截.限制流量.Nginx自身有的请求限制模块ngx_http_li ...

  6. 二叉查找树(BST)的实现

    一.二叉树介绍 二叉查找树(Binary Search Tree,BST),又称二叉排序树,也称二叉搜索树,它或者是一颗空树,或者具有如下性质的树:若它的左子树不为空,则左子树上所有节点的值都小于根节 ...

  7. [Swift]LeetCode620. 有趣的电影 | Not Boring Movies

    SQL架构 Create table If Not Exists cinema (id ), description varchar(), rating , )) Truncate table cin ...

  8. [Swift]LeetCode803. 打砖块 | Bricks Falling When Hit

    We have a grid of 1s and 0s; the 1s in a cell represent bricks.  A brick will not drop if and only i ...

  9. Java面向对象特征之封装

    package practice;/** * @功能 创建动物类,对动物的属性进行封装 * @author square 凉 * */public class Animal { /**  * 动物姓名 ...

  10. python数组并集交集补集

    并集 a = ["a", "b", "c", "d"] b = ["b", "e" ...