原生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: ;padding: ;}
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: 10px;font-size:30px;text-decoration:none;}
</style>
</head>
<body>
<div>
<ul>
<li style="background: red;"></li>
<li style="background: yellow;"></li>
<li style="background: blue;"></li>
<li style="background: black;"></li>
<li style="background: green;"></li>
<li style="background: orange;"></li>
<li style="background: skyblue;"></li>
<li style="background: blue;"></li>
<li style="background: green;"></li>
<li style="background: orange;"></li>
<li style="background: skyblue;"></li>
</ul>
<a href="javascript:void(0)" class="prev" style="left:0px;">←</a>
<a href="javascript:void(0)" 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().width()*$("ul li").length);
var inow = ;
var timer = null; $("div").mouseover(function(){
clearInterval(timer);
})
$("div").mouseout(function(){
autoplay();
}) $(".next").click(function(){
if(inow == $("ul li").length/){
oul.css("left","0px");
inow = ;
}else{
inow++;
}
var leng = -inow*$("ul li").eq().width()+"px";
oul.animate({"left":leng});
})
$(".prev").click(function(){
if(inow == ){
var ml = -$("ul li").eq().width()*($("ul li").length/)+"px";
oul.css("left",ml);
inow = $("ul li").length/-;
}else{
inow--;
}
var leng = -inow*$("ul li").eq().width()+"px";
oul.animate({"left":leng});
})
function autoplay(){
timer = setInterval(function(){
if(inow == $("ul li").length/){
oul.css("left","0px");
inow = ;
}else{
inow++;
}
console.log(inow);
var leng = -inow*$("ul li").eq().width()+"px";
oul.animate({"left":leng});
},);
}
autoplay();
</script>
</html>
希望这篇文章能帮到大家,喜欢技术交流的可以关注我,一起交流前端技术。
原生JS编写兼容IE6,7,8浏览器无缝自动轮播(带按钮切换)的更多相关文章
- 轮播插件、原生js编写,弄懂这个,基本上各种轮播都可以自己写了
直接上代码了: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
- 关于错位动画的练习,原生js编写
最近在网上看到一个关于错位动画的文章,感觉非常有趣,便自己练习了一下,文章连接:http://www.w3cplus.com/animation/staggering-animations.html ...
- 3、js无缝滚动轮播
另一个无缝滚动轮播,带暂停,由于js是异步,用C面向过程的思想开始会很怪异很怪异,因为当你定时器里面需要执行的函数时间比较长或是有一段延时时,异步的代码会完全不同,但习惯就好了. 这个代码有几个问题, ...
- html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器
以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...
- 兼容IE6\7\8浏览器的html5标签的几个方案
html5大行其道的时代已经到来.如果你还在等待浏览器兼容,说明你已经与web脱节几条街了.当然,这得益于移动客户端的蓬勃发展.如果还在纠结于,是否应该掌握html5和css3技术时,请狠狠的抽自己几 ...
- 原生js编写的安全色拾色器
<html > <head> <meta http-equiv="Content-Type" content="text/html; cha ...
- 原生JS编写getByClass、addClass、removeClass、hasClass
前言: 年后换了工作,在现在的公司写交互主要使用JS原生:刚刚入门前端的时候写交互一直用的原生JS,虽然用的不怎么样.后来去之前的公司之后,leader主张把jQuery用好,JS原生自然就熟练了:一 ...
- 原生JS简单的无缝自动轮播
最近在不断的加强巩固js.在学习jq和vue之后发现很多东西其实都是不明所以,有些底层的东西自己不懂,到头来也只是一昧的使用,一直在用别人的东西,对自己的成长帮助也不大. 万丈高楼平地起,基础打扎实了 ...
- 原生js编写设为首页兼容ie、火狐和谷歌
// JavaScript Document // 加入收藏 <a onclick="AddFavorite(window.location,document.title)" ...
随机推荐
- 检测 web项目 404 500 状态的 页面
用于发版前自动化测试 用法 1.使用参数 -f 指定url配置文件2.url文件简单配置, 每行一条URL 下面三种格式都可以,如果不声明 GET.POST 默认为GET请求 https://www. ...
- Ubuntu部署python3.7的开发和运行环境
Ubuntu部署python3.7的开发和运行环境 1 概述 由于最近项目全部由python2.x转向 python3.x(使用 python3.7.1) ,之前的云主机的的默认python版本都面临 ...
- IIS集中化管理与编程REST API
目录 一. 简介.... 1 二. 安装.... 1 三. IIS Administration配置文件.... 2 四. Web UI管理界面.... ...
- 数据库sql常见优化方法
以前刚开始做项目的时候,开发经验尚浅,每次遇到查询比较慢时,项目经理就会问:是不是又用select * 了?查询条件有没有加索引?一语惊醒梦中人,赶紧检查..果然如此! 有时我们写sql语句时,没有考 ...
- PHP workerMan tcp与webSocket 透传互通
<?php $work_path = dirname(__FILE__); chdir($work_path); use \Workerman\Worker; use \Workerman\Li ...
- Redis安装及使用详解
推荐在Linux系统上安装,这里我采用CentOS6: Redis采用3.0.0版本,官网下载即可 由于Redis是C语言编写,需要安装gcc(部分Linux自带gcc) yum install gc ...
- [Swift]LeetCode438. 找到字符串中所有字母异位词 | Find All Anagrams in a String
Given a string s and a non-empty string p, find all the start indices of p's anagrams in s. Strings ...
- Ubuntu12.04下安装NS3.25
实验室项目的需求,要使用到NS3做仿真,使用实验室的电脑,Ubuntu12.04,版本比较低,建议大家使用16.04,这样安装依赖文件时不会出现版本过低的问题 (没管最后也安装成功了).下面就安装步骤 ...
- Yarn篇--搭建yarn集群
一.前述 有了上次hadoop集群的搭建,搭建yarn就简单多了.废话不多说,直接来 二.规划 三.配置如下 yarn-site.xml配置 <property> <n ...
- .NET Core WebApi中实现多态数据绑定
什么是多态数据绑定? 我们都知道在ASP.NET Core WebApi中数据绑定机制(Data Binding)负责绑定请求参数, 通常情况下大部分的数据绑定都能在默认的数据绑定器(Binder)中 ...