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 相关文章推荐
用JS实现的一个include函数
Jul 21 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
Jun 27 Javascript
javascript中数组方法汇总
Jul 07 Javascript
Angular中$compile源码分析
Jan 28 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 Javascript
jQuery基于ID调用指定iframe页面内的方法
Jul 06 Javascript
vue.js中使用echarts实现数据动态刷新功能
Apr 16 Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
Aug 04 Javascript
js+audio实现音乐播放器
Sep 13 Javascript
uni-app 自定义底部导航栏的实现
Dec 11 Javascript
EXTJS7实现点击拖拉选择文本
Dec 17 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实现登陆验证码(类似条行码状)
2006/10/09 PHP
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
php中突破基于HTTP_REFERER的防盗链措施(stream_context_create)
2011/03/29 PHP
php中mysql模块部分功能的简单封装
2011/09/30 PHP
php比较两个绝对时间的大小
2014/01/31 PHP
php使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
又一个图片自动缩小的JS代码
2007/03/10 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
jquery单选框radio绑定click事件实现方法
2015/01/14 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
2016/03/06 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
静态页面html中跳转传值的JS处理技巧
2016/06/22 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
bootstrap table表格插件使用详解
2017/05/08 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
spring+angular实现导出excel的实现代码
2019/02/27 Javascript
微信小程序如何调用图片接口API并居中显示
2019/06/29 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
python中reduce()函数的使用方法示例
2017/09/29 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
浅谈Pandas Series 和 Numpy array中的相同点
2019/06/28 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
英国体育器材进口商店:UK Sport Imports
2017/03/14 全球购物
船舶专业个人求职信范文
2014/01/02 职场文书