兼容ie6的轮播效果
Posted maochunhong
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了兼容ie6的轮播效果相关的知识，希望对你有一定的参考价值。
公司要求兼容ie6，之前网上找了很多插件都不行，最后只能自己写个模拟轮播的，例子如下
<style type="text/css">
#container{
width:1216px;
height:100%;
margin:0 auto;
position:relative;
}
#parent{
width:100%;
height:160px;
overflow:hidden;
border:1px solid #ccc;
padding:0;
font-size:0;
}
#parent div{
width:300px;
height:160px;
display:inline-block;
*display:inline;
*zoom:1;
font-size:40px;
color:#fff;
font-weight:bold;
text-align:center;
padding:0;
margin:0 2px;
}
span{
font-size:40px;
color:#ccc;
position:absolute;
}
.left{
left:-30px;
top:50px;
}
.right{
right:-30px;
top:50px;
}
</style>
<body>
<div id="container">
<span class="left"><</span>
<div id="parent">
<div style="background:red">1</div>
<div style="background:blue">2</div>
<div style="background:yellow">3</div>
<div style="background:#F04681">4</div>
<div style="background:#0AC0B5">5</div>
<div style="background:#C146F0">6</div>
<div style="background:#4674F0">7</div>
<div style="background:black">8</div>
</div>
<span class="right">></span>
</div>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script type="text/javascript">
var timer = setInterval(task,1500);
function task(){
var clones = $("#parent").children().eq(0).clone(true);
$("#parent").children().eq(0).remove();
$("#parent").append(clones);
}
$("#parent").mouseenter(function(){
clearInterval(timer);
})
$("#parent").mouseleave(function(){
timer = setInterval(task,1500);
})
$(".left").click(function(){
/* var clones = $("#parent").children().eq(0).clone(true);
$("#parent").children().eq(0).remove();*/
clearInterval(timer);
var clones = $("#parent>div:first").clone(true);
$("#parent>div:first").remove();
$("#parent").append(clones);
timer = setInterval(task,1500);
})
$(".right").click(function(){
clearInterval(timer);
var clones = $("#parent>div:last").clone(true);
$("#parent>div:last").remove();
$("#parent").prepend(clones);
timer = setInterval(task,1500);
})
</script>
</body>
完全兼容ie6
以上是关于兼容ie6的轮播效果的主要内容，如果未能解决你的问题，请参考以下文章