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 实现的点击复制代码
Mar 24 Javascript
JavaScript中判断整数的多种方法总结
Nov 08 Javascript
node.js中的http.createServer方法使用说明
Dec 14 Javascript
javascript强制点击广告的方法
Feb 06 Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
Jan 27 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
深入Node TCP模块的理解
Mar 13 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
vue 动态创建组件的两种方法
Dec 31 Vue.js
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
用session做客户验证时的注意事项
2006/10/09 PHP
php结合表单实现一些简单功能的例子
2011/06/04 PHP
PHP里的中文变量说明
2011/07/23 PHP
浅析php中jsonp的跨域实例
2013/06/21 PHP
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
PHP保存带BOM文件的方法
2015/02/12 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
PHP设计模式之外观模式(Facade)入门与应用详解
2019/12/13 PHP
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
numpy找出array中的最大值,最小值实例
2018/04/03 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
解决python中画图时x,y轴名称出现中文乱码的问题
2019/01/29 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
YII2 全局异常处理深入讲解
2021/03/24 PHP
大学运动会入场词
2014/02/22 职场文书
婚假请假条格式及范文
2014/04/10 职场文书
司机工作自我鉴定
2014/09/19 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
在pyCharm中下载第三方库的方法
2021/04/18 Python
Java Socket实现Redis客户端的详细说明
2021/05/26 Redis
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript