码迷,mamicode.com
首页 > 其他好文 > 详细

兼容ie6的轮播效果

时间:2018-08-22 13:15:37      阅读:290      评论:0      收藏:0      [点我收藏+]

标签:position   100%   inter   div   src   time   class   rem   hidden   

公司要求兼容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的轮播效果

标签:position   100%   inter   div   src   time   class   rem   hidden   

原文地址:https://www.cnblogs.com/maochunhong/p/9516934.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!