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 一次处理多个ajax请求的代码
Sep 02 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
Mar 29 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 Javascript
js操作cookie保存浏览记录的方法
Dec 25 Javascript
详解自动生成博客目录案例
Dec 09 Javascript
vue-cli构建项目使用 less的方法
Oct 04 Javascript
angularjs 缓存的使用详解
Mar 19 Javascript
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 16 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 18 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 获取SWF动画截图示例代码
2014/02/10 PHP
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
PHP捕获Fatal error错误的方法
2014/06/11 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
Aster vs KG BO3 第一场2.18
2021/03/10 DOTA
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
Javascript 篱式条件判断
2008/08/22 Javascript
Javascript 判断客户端浏览器类型代码
2010/03/01 Javascript
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
2012/11/07 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
jQuery Validate初步体验(二)
2015/12/12 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
vue2.0 实现页面导航提示引导的方法
2018/03/13 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
python相似模块用例
2016/03/04 Python
Python对列表中的各项进行关联详解
2017/08/15 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
2020/06/02 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
函授本科毕业生自我鉴定
2013/10/16 职场文书
最新的咖啡店创业计划书
2013/12/30 职场文书
个人求职信范例
2014/01/29 职场文书
迟到检讨书5000字
2014/01/31 职场文书
关于抽烟的检讨书
2014/02/25 职场文书
个人借款担保书
2014/04/02 职场文书
解除劳动合同协议书
2014/04/14 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
php+laravel 扫码二维码签到功能
2021/05/15 PHP