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中的同名标识符优先级
Dec 06 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 Javascript
Javascript正则控制文本框只能输入整数或浮点数
Sep 02 Javascript
jQuery表格插件datatables用法汇总
Mar 29 Javascript
javascript原型继承工作原理和实例详解
Apr 07 Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 Javascript
jQuery实现元素的插入
Feb 27 Javascript
JS优化与惰性载入函数实例分析
Apr 06 Javascript
VUE重点问题总结
Mar 19 Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 Javascript
基于axios 的responseType类型的设置方法
Oct 29 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
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
php 操作调试的方法
2012/07/12 PHP
php通过获取头信息判断图片类型的方法
2015/06/26 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
PHP记录和读取JSON格式日志文件
2016/07/07 PHP
CheckBox 如何实现全选?
2006/06/23 Javascript
通过jQuery源码学习javascript(二)
2012/12/27 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
2013/06/08 Javascript
js获取url中指定参数值的示例代码
2013/12/14 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
2016/09/04 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
微信小程序 欢迎界面开发的实例详解
2016/11/30 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
公众号SVG动画交互实战代码
2020/05/31 Javascript
Python采用raw_input读取输入值的方法
2014/08/18 Python
对python sklearn one-hot编码详解
2018/07/10 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
共产党员公开承诺书范文
2014/03/28 职场文书
应聘英语教师求职信
2014/04/24 职场文书
民主生活会剖析材料
2014/09/30 职场文书
北京英文导游词
2015/02/12 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
Python实战之实现简易的学生选课系统
2021/05/25 Python