jQuery实现无缝轮播图

jQuery实现无缝轮播图

实现的主要功能，自动轮播，鼠标移动到图片轮播停止，离开继续轮播。

用到的jq知识点：

animate(json数据,毫秒数，回调函数)

clone()克隆元素

addclass()添加

removeclass()移除

appendTo()将一个元素添加到父元素中

is() 根据选择器、元素或 jQuery 对象来检测匹配元素集合,如果这些元素中至少有一个元素匹配给定的参数,则返回 true。

:animated 选择器选取当前的所有动画元素

siblings()姊妹选择器

stop()停止当前正在运行的动画

效果

html文件

<div class="sec" id="sec">
        <ul class="top-img" id="top-img">
            <li><img src="./img/pic1.png"alt=""></li>
            <li><img src="./img/pic2.png"alt=""></li>
            <li><img src="./img/pic3.png"alt=""></li>
            <li><img src="./img/pic4.png"alt=""></li>
            <li><img src="./img/pic5.png"alt=""></li>
        </ul>
        <div class="btns" id="btns">
            <a href="javascript:;" class="btnLeft" id="btnLeft">&lt;</a>
            <a href="javascript:;" class="btnRight" id="btnRight">&gt;</a>
        </div>
        <ol class="down-btn" id="down-btn">
            <li class="cur">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
</div>

CSS文件

<style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #000;
        }
        .sec{
            width: 600px;
            height: 350px;
            margin: 150px auto;
            border: 1px solid #000;
            position: relative;
            overflow: hidden;
            border-radius: 15px;
        }
        .sec .top-img{
            width: 4000px;
            height: 350px;
            list-style: none;
            position: relative;
        }
        .sec .top-img li{
            width: 600px;
            height: 350px;
            float: left;
        }
        .sec .btns a{
            display: block;
            position: absolute;
            top: 50%;
            width: 50px;
            height: 50px;
            font-family: serif;
            font-size: 25px;
            text-align: center;
            line-height: 50px;
            margin-top: -25px;
            border-radius: 50%;
            text-decoration: none;
            color: #fff;
            opacity: 0.3;
            background-color: rgba(0,0,0,.3);
        }
        .sec .btns a.btnRight{
            right: 0;
        }
        .sec .btns a:hover{
            text-shadow: 0 0 20px #fff;
            opacity: 0.8;
        }
        .sec .down-btn{
            list-style: none;
            width: 140px;
            height: 18px;
            position: absolute;
            bottom: 5px;
            left: 50%;
            font-family: serif;
            font-size: 13px;
            margin-left: -75px;
        }
        .sec .down-btn li{
            float: left;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            margin: 0 5px;
            text-align: center;
            line-height: 18px;
            cursor: pointer;
            color: #fff;
            background-color: rgba(0,0,0,.3)
        }
        .sec .down-btn li:hover{
            background-color: rgba(0,0,0,.7)
        }
        .sec .down-btn .cur{
            background-color: rgba(0,0,0,.7)
        }
</style>

js文件（第一行附带jq文件）

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
        var idx = 0;
        var $length = $("#top-img li").length;
        $("#top-img li").eq(0).clone().appendTo("#top-img");
        $("#btnRight").click(move)
        function move(){
            if($("#top-img").is(":animated")) return
            idx++;
            $("#top-img").animate({"left":-idx * 600},800,function(){
                if(idx > $length-1){
                    idx = 0;
                    $("#top-img").css("left",0)
                }
                $("#down-btn li").eq(idx).addClass("cur").siblings().removeClass("cur");
            })
        }
        $("#btnLeft").click(function(){
            if($("#top-img").is(":animated")) return
            idx--;
            if(idx < 0){
                idx = $length -1;
                $("#top-img").css("left",-$length * 600);
            }
            $("#top-img").animate({"left":-idx * 600},800,function(){
                $("#down-btn li").eq(idx).addClass("cur").siblings().removeClass("cur")
            })
        })
        $("#down-btn li").mouseenter(function(){
            index = $(this).index();
            $("#top-img").stop(true).animate({"left":-index * 600},800);
            $("#down-btn li").eq(index).addClass("cur").siblings().removeClass("cur")
        })
        var timer = setInterval(move,2500);
        $("#sec").mouseenter(function(){
            clearInterval(timer)
        })
        $("#sec").mouseleave(function(){
            clearInterval(timer);
            timer = setInterval(move,2500);
        })
    </script>