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创建平滑的页面滚动(顶部或底部)
Feb 26 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
优化Node.js Web应用运行速度的10个技巧
Sep 03 Javascript
用javascript关闭本窗口不弹出询问框的方法
Sep 12 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
微信小程序入门教程
Nov 18 Javascript
实例解析Array和String方法
Dec 14 Javascript
微信小程序开发(二)图片上传+服务端接收详解
Jan 11 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
javascript实现5秒倒计时并跳转功能
Jun 20 Javascript
Javascript原生ajax请求代码实例
Feb 20 Javascript
JS实现网页端猜数字小游戏
Mar 06 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学习笔记之 函数声明
2011/06/09 PHP
基于php中使用excel的简单介绍
2013/08/02 PHP
Linux编译升级php的详细方法
2013/11/04 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
php头像上传预览实例代码
2017/05/02 PHP
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
2016/10/21 Javascript
vue-cli如何添加less 以及sass
2017/07/06 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
解决layer.open后laydate失效的问题
2019/09/06 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
Python实现的一个简单LRU cache
2014/09/26 Python
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
小 200 行 Python 代码制作一个换脸程序
2020/05/12 Python
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
Stylenanda中文站:韩国一线网络服装品牌
2016/12/22 全球购物
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
冰淇淋开店创业计划书
2014/02/01 职场文书
民主评议党员个人总结
2015/02/13 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
PyCharm配置KBEngine快速处理代码提示冲突、配置命令问题
2021/04/03 Python
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers