JS编写兼容IE6,7,8浏览器无缝自动轮播


Posted in Javascript onOctober 12, 2018

JS编写兼容IE6,7,8浏览器无缝自动轮播

项目要求页面兼容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: 0;padding: 0;}
   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:0 10px;font-size:30px;text-decoration:none;}
  </style>
 </head>
 <body>
  <div>
   <ul>
    <li style="background: red;">1</li>
    <li style="background: yellow;">2</li>
    <li style="background: blue;">3</li>
    <li style="background: black;">4</li>
    <li style="background: green;">5</li>
    <li style="background: orange;">6</li>
    <li style="background: skyblue;">7</li>
    <li style="background: blue;">8</li>
    <li style="background: green;">9</li>
    <li style="background: orange;">10</li>
    <li style="background: skyblue;">11</li>
   </ul>
   <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="prev" style="left:0px;">←</a>
   <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" 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(0).width()*$("ul li").length);
  var inow = 0;
  var timer = null;
   
  $("div").mouseover(function(){
   clearInterval(timer);
  })
  $("div").mouseout(function(){
   autoplay();
  })
   
  $(".next").click(function(){
   if(inow == $("ul li").length/2){
    oul.css("left","0px");
    inow = 1;
   }else{
    inow++;
   }
   var leng = -inow*$("ul li").eq(0).width()+"px"; 
   oul.animate({"left":leng});
  })
  $(".prev").click(function(){
   if(inow == 0){
    var ml = -$("ul li").eq(0).width()*($("ul li").length/2)+"px";
    oul.css("left",ml);
    inow = $("ul li").length/2-1;
   }else{
    inow--;
   }
   var leng = -inow*$("ul li").eq(0).width()+"px";
   oul.animate({"left":leng});
  })
  function autoplay(){
    timer = setInterval(function(){
    if(inow == $("ul li").length/2){
     oul.css("left","0px");
     inow = 1;
    }else{
     inow++;
    }
    console.log(inow);
    var leng = -inow*$("ul li").eq(0).width()+"px";
    oul.animate({"left":leng});
   },2000);
  }
  autoplay();
 </script>
</html>

希望这篇文章能帮到大家,喜欢技术交流的可以关注我,一起交流前端技术。感谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript 定义function的三种方式小结
Oct 16 Javascript
Kibo 用于处理键盘事件的Javascript工具库
Oct 28 Javascript
Javascript中匿名函数的多种调用方式总结
Dec 06 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
Prototype框架详解
Nov 25 Javascript
谈谈target=_new和_blank的不同之处
Oct 25 Javascript
微信小程序 navbar实例详解
May 11 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
Nov 09 Javascript
详解js获取video任意时间的画面截图
Apr 17 Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 Javascript
详解Vue中Axios封装API接口的思路及方法
Oct 10 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
Oct 12 #Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
Oct 12 #Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
Oct 12 #Javascript
在JS循环中使用async/await的方法
Oct 12 #Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 #Javascript
vue项目环境变量配置的实现方法
Oct 12 #Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 #Javascript
You might like
IE8 下的Js错误HTML Parsing Error...
2009/08/14 Javascript
JavaScript 学习技巧
2010/02/17 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
jquery序列化表单以及回调函数的使用示例
2014/07/02 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
js两种拼接字符串的简单方法(必看)
2016/09/02 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
nodeJS微信分享
2017/12/20 NodeJs
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
vue将单页面改造成多页面应用的方法
2018/11/25 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
在Vue中使用this.$store或者是$route一直报错的解决
2019/11/08 Javascript
Vue混入mixins滚动触底的方法
2019/11/22 Javascript
vue实现公共方法抽离
2020/07/31 Javascript
微信小程序实现简单的select下拉框
2020/11/23 Javascript
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
Python实现将Excel转换为json的方法示例
2017/08/05 Python
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
Python程序员面试题 你必须提前准备!
2018/01/16 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
对Django的restful用法详解(自带的增删改查)
2019/08/28 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
解决python 虚拟环境删除包无法加载的问题
2020/07/13 Python
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
eBay奥地利站:eBay.at
2019/07/24 全球购物
简单英文演讲稿
2014/01/01 职场文书
竞选文艺委员演讲稿
2014/04/28 职场文书
促销活动总结模板
2014/07/01 职场文书
服装区域经理岗位职责
2015/04/10 职场文书
干部理论学习心得体会
2016/01/21 职场文书
python 解决微分方程的操作(数值解法)
2021/05/26 Python