兼容ie6的轮播效果

最新推荐文章于 2020-08-31 14:23:31 发布

weixin_30656145

最新推荐文章于 2020-08-31 14:23:31 发布

阅读量242

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/maochunhong/p/9516934.html

版权

公司要求兼容ie6，之前网上找了很多插件都不行，最后只能自己写个模拟轮播的，例子如下

<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

转载于:https://www.cnblogs.com/maochunhong/p/9516934.html

weixin_30656145

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
兼容ie6的轮播效果

公司要求兼容ie6，之前网上找了很多插件都不行，最后只能自己写个模拟轮播的，例子如下<style type="text/css"> #container{ width:1216px; height:100%; margin:0 auto; position:relative; } #parent{ width:100%; height:160px...
复制链接

扫一扫