原生JS编写兼容IE6,7,8浏览器无缝自动轮播(带按钮切换)1

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

本文给大家介绍原生JS编写兼容IE6,7,8浏览器无缝自动轮播(带按钮切换) ，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

原生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: 0;padding: 0;}
            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:0 10px;font-size:30px;text-decoration:none;}
        </style>
    </head>
    <body>
        <div>
            <ul>
                <li style="background: red;">1</li>
                <li style="background: yellow;">2</li>
                <li style="background: blue;">3</li>
                <li style="background: black;">4</li>
                <li style="background: green;">5</li>
                <li style="background: orange;">6</li>
                <li style="background: skyblue;">7</li>
                <li style="background: blue;">8</li>
                <li style="background: green;">9</li>
                <li style="background: orange;">10</li>
                <li style="background: skyblue;">11</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(0).width()*$("ul li").length);
        var inow = 0;
        var timer = null;
        
        $("div").mouseover(function(){
            clearInterval(timer);
        })
        $("div").mouseout(function(){
            autoplay();
        })
        
        $(".next").click(function(){
            if(inow == $("ul li").length/2){
                oul.css("left","0px");
                inow = 1;
            }else{
                inow++;
            }
            var leng = -inow*$("ul li").eq(0).width()+"px"; 
            oul.animate({"left":leng});
        })
        $(".prev").click(function(){
            if(inow == 0){
                var ml = -$("ul li").eq(0).width()*($("ul li").length/2)+"px";
                oul.css("left",ml);
                inow = $("ul li").length/2-1;
            }else{
                inow--;
            }
            var leng = -inow*$("ul li").eq(0).width()+"px";
            oul.animate({"left":leng});
        })
        function autoplay(){
                timer = setInterval(function(){
                if(inow == $("ul li").length/2){
                    oul.css("left","0px");
                    inow = 1;
                }else{
                    inow++;
                }
                console.log(inow);
                var leng = -inow*$("ul li").eq(0).width()+"px";
                oul.animate({"left":leng});
            },2000);
        }
        autoplay();
    </script>
</html>

希望这篇文章能帮到大家，喜欢技术交流的可以关注我，一起交流前端技术。

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问JavaScript视频教程！

以上就是原生JS编写兼容IE6,7,8浏览器无缝自动轮播(带按钮切换)的详细内容，更多请关注php中文网其它相关文章！