公司要求兼容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
转载于:https://www.cnblogs.com/maochunhong/p/9516934.html
相关资源：兼容ie6的一个轮播图