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 预解析
Oct 25 Javascript
jquery 分页控件实现代码
Nov 30 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
Jul 29 Javascript
jQuery 获取和设置select下拉框的值实现代码
Nov 08 Javascript
学习JavaScript设计模式(策略模式)
Nov 26 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
移动端js触摸事件详解
Sep 18 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
jQuery插件Validation表单验证详解
May 26 jQuery
React 路由懒加载的几种实现方案
Oct 23 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 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
php字符串截取中文截取2,单字节截取模式
2007/12/10 PHP
php 信息采集程序代码
2009/03/17 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
PHP7 错误处理机制修改
2021/03/09 PHP
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
js+ajax实现获取文件大小的方法
2015/12/08 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
2016/06/22 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
基于jQuery的checkbox全选问题分析
2016/11/18 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
Vue props 单向数据流的实现
2018/11/06 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
electron-vue开发环境内存泄漏问题汇总
2019/10/10 Javascript
JS实现可控制的进度条
2020/03/25 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
New Balance比利时官方网站:购买鞋子和服装
2021/01/15 全球购物
2014年党员评议表自我评价
2014/09/27 职场文书
发布会邀请函
2015/01/31 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
python删除csv文件的行列
2021/04/06 Python
正确的理解和使用Django信号(Signals)
2021/04/14 Python
anaconda python3.8安装后降级
2021/06/11 Python
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python
bootstrapv4轮播图去除两侧阴影及线框的方法
2022/02/15 HTML / CSS