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的一行代码轻松实现拖动效果
Dec 28 Javascript
TextArea不支持maxlength的解决办法(jquery)
Sep 13 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 Javascript
jQuery中insertAfter()方法用法实例
Jan 08 Javascript
jQuery修改class属性和CSS样式整理
Jan 30 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
Feb 10 Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
Vue 获取数组键名的方法
Jun 21 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 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
Laravel 5框架学习之Blade 简介
2015/04/08 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
js点击文本框弹出可选择的checkbox复选框
2016/02/03 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
2016/10/15 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
layui表格内放置图片,并点击放大的实例
2019/09/10 Javascript
原生js实现商品筛选功能
2019/10/28 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
Python学习之asyncore模块用法实例教程
2014/09/29 Python
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
Python get获取页面cookie代码实例
2018/09/12 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
Python数据库小程序源代码
2019/09/15 Python
Python基于paramunittest模块实现excl参数化
2020/04/26 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
python自动生成证件号的方法示例
2021/01/14 Python
金宝贝童装官网:Gymboree
2016/08/31 全球购物
.NET初级开发工程师面试题(包括Javascript)
2012/08/22 面试题
家长写给孩子的评语
2014/04/18 职场文书
2014年团支书工作总结
2014/11/14 职场文书
终止劳动合同通知书
2015/04/16 职场文书
大学生求职意向书
2015/05/11 职场文书
MySQL基础(二)
2021/04/05 MySQL
pytorch--之halfTensor的使用详解
2021/05/24 Python
详解Redis瘦身指南
2021/05/26 Redis