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 将disabled的元素置为enabled的三种方法
Jul 25 Javascript
THREE.JS入门教程(4)创建粒子系统
Jan 24 Javascript
JS实现根据出生年月计算年龄
Jan 10 Javascript
javascript中验证大写字母、数字和中文
Jan 15 Javascript
javascript中的return和闭包函数浅析
Jun 06 Javascript
Javascript BOM学习小结(六)
Nov 26 Javascript
JavaScript随机生成颜色的方法
Oct 15 Javascript
详解vue渲染函数render的使用
Dec 12 Javascript
vue中使用element-ui进行表单验证的实例代码
Jun 22 Javascript
Vue.js中的extend绑定节点并显示的方法
Jun 20 Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
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
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
PHP 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
js判断子窗体是否关闭的方法
2015/08/11 Javascript
一个php+js实时显示时间问题
2015/10/12 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
2018/09/29 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
vue实现公告栏文字上下滚动效果的示例代码
2020/06/16 Javascript
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
基于并发服务器几种实现方法(总结)
2017/12/29 Python
Python使用win32com模块实现数据库表结构自动生成word表格的方法
2018/07/17 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
Python中Selenium库使用教程详解
2020/07/23 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
英国DIY和家居装饰领域的主要品牌:Wickes
2019/11/26 全球购物
Yahoo-PHP面试题2
2014/12/06 面试题
Java程序开发中如何应用线程
2016/03/03 面试题
销售文员岗位职责
2013/11/29 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
小学运动会报道稿
2014/10/04 职场文书
涨价通知
2015/04/23 职场文书
公司车队管理制度
2015/08/04 职场文书
2015年十月一日放假通知
2015/08/18 职场文书
2016中考冲刺决心书
2015/09/22 职场文书
历史名人教你十五个读书方法,赶快Get起来!
2019/07/18 职场文书