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 对象介绍
Jan 20 Javascript
基于jQuery的树控件实现代码(asp.net+json)
Jul 11 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
Oct 24 Javascript
JS.findElementById()使用介绍
Sep 21 Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
js正则表达式replace替换变量方法
May 21 Javascript
Angular 路由route实例代码
Jul 12 Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 Javascript
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 Javascript
VuePress 快速踩坑小结
Feb 14 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 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学习 运算符与运算符优先级
2008/06/15 PHP
PHP 微信支付类 demo
2015/11/30 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
php链式操作的实现方式分析
2019/08/12 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
Javascript根据指定下标或对象删除数组元素
2012/12/21 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
AngularJS入门教程之迭代器过滤详解
2016/08/18 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
python求pi的方法
2014/10/08 Python
Python中的类与对象之描述符详解
2015/03/27 Python
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
Python实现按特定格式对文件进行读写的方法示例
2017/11/30 Python
Python字符串拼接六种方法介绍
2017/12/18 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
安装docker-compose的两种最简方法
2019/07/30 Python
Python脚本操作Excel实现批量替换功能
2019/11/20 Python
python使用hdfs3模块对hdfs进行操作详解
2020/06/06 Python
利用python绘制正态分布曲线
2021/01/04 Python
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
医学院护理专业应届生求职信
2013/11/12 职场文书
销售岗位职责范本
2014/06/12 职场文书
大学学生个人总结
2015/02/15 职场文书
道德与公民自我评价
2015/03/09 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
民间借贷被告代理词
2015/05/23 职场文书
vue router 动态路由清除方式
2022/05/25 Vue.js