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 JSON实现无刷新三级联动实例探讨
May 28 Javascript
js展开闭合效果演示代码
Jul 24 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 Javascript
angularJS 中$scope方法使用指南
Feb 09 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
Dec 05 Javascript
微信小程序 Storage API实例详解
Oct 02 Javascript
自定义require函数让浏览器按需加载Js文件
Nov 24 Javascript
基于Vue.js实现tab滑块效果
Jul 23 Javascript
mac中利用NVM管理不同node版本的方法详解
Nov 08 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
Apr 28 Javascript
了解Javascript中函数作为对象的魅力
Jun 19 Javascript
JS字符串常用操作方法实例小结
Jun 24 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来处理多个提交任务
2006/10/09 PHP
PHP array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
教你如何使用php session
2013/10/28 PHP
php操作MongoDB基础教程(连接、新增、修改、删除、查询)
2014/03/25 PHP
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
js实例属性和原型属性示例详解
2014/11/23 Javascript
JS数组合并push与concat区别分析
2015/12/17 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
浅析JavaScript动画模拟拖拽原理
2016/12/09 Javascript
JS实现图片放大缩小的方法
2017/02/15 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
2019/10/16 Javascript
vue之延时刷新实例
2019/11/14 Javascript
js 图片懒加载的实现
2020/10/21 Javascript
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
PyQt+socket实现远程操作服务器的方法示例
2019/08/22 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
Python 如何查找特定类型文件
2020/08/17 Python
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
体育教师个人的自我评价
2014/02/16 职场文书
讲解员培训方案
2014/05/04 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
文明家庭事迹材料
2014/12/20 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
大学生个人学年总结
2015/02/15 职场文书
个人年终总结结尾
2015/03/06 职场文书
活动费用申请报告
2015/05/15 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL