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 相关文章推荐
prototype.js的Ajax对象
Sep 23 Javascript
用js脚本控制asp.net下treeview的NodeCheck的实现代码
Mar 02 Javascript
js网页中的(运行代码)功能实现思路
Feb 04 Javascript
jQuery下的动画处理总结
Oct 10 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
Aug 25 Javascript
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
Angular(5.2-&gt;6.1)升级小结
Dec 27 Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 Javascript
es6函数之尾调用优化实例分析
Apr 25 Javascript
vue实现放大镜效果
Sep 17 Javascript
如何使用CocosCreator对象池
Apr 14 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信号量基本用法实例详解
2016/02/12 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
sogou地图API用法实例教程
2014/09/11 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
使用BootStrap实现悬浮窗口的效果
2016/12/13 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
NodeJS创建最简单的HTTP服务器
2017/05/15 NodeJs
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
Vue文件配置全局变量的实例
2018/09/06 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
python求众数问题实例
2014/09/26 Python
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
Ashford台湾:以折扣价提供奢华的男女用表款
2019/12/04 全球购物
医学专业大学生求职的自我评价
2013/11/27 职场文书
应用心理学个人求职信范文
2013/12/11 职场文书
一年级小学生评语
2014/04/22 职场文书
社区综治工作汇报
2014/10/27 职场文书
中标通知书
2015/04/17 职场文书
导游词之凤凰古城
2019/10/22 职场文书
导游词之贵州百里杜鹃
2019/10/29 职场文书