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 相关文章推荐
jquery选择器原理介绍($()使用方法)
Mar 25 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
Jun 03 Javascript
简单易用的倒计时js代码
Aug 04 Javascript
Javascript基础教程之argument 详解
Jan 18 Javascript
js实现类似MSN提示的页面效果代码分享
Aug 24 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
Nov 17 Javascript
微信和qq时间格式模板实例详解
Oct 21 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
通过button将form表单的数据提交到action层的实例
Sep 08 Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 17 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
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
CodeIgniter与PHP5.6的兼容问题
2015/07/16 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
List the UTC Time on a Computer
2007/06/11 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
事件模型在各浏览器中存在差异
2010/10/20 Javascript
javascript结合CSS实现苹果开关按钮特效
2015/04/07 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
2016/11/24 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
[44:39]2014 DOTA2国际邀请赛中国区预选赛 NE VS CNB
2014/05/21 DOTA
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
pycharm运行scrapy过程图解
2019/11/22 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
香港通票:Hong Kong Pass
2019/02/26 全球购物
navabi英国:设计师大码女装
2019/06/25 全球购物
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
《秋姑娘的信》教学反思
2014/02/28 职场文书
工商管理专业自荐信
2014/06/03 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书