jquery实现轮播图的无缝轮播

今天学习了一个jquery实现无缝轮播的方法与思路，相信好多初学者都对轮播不陌生，不多说，直接开始：

1.代码——html部分

<div class="banner">
    <ul class="img">
        <li><img src="../img/1.jpg" alt=""/></li>
        <li><img src="../img/2.jpg" alt="" /></li>
        <li><img src="../img/3.jpg" alt="" /></li>
        <li><img src="../img/4.jpg" alt="" /></li>
    </ul>
    <ul class="num">

    </ul>
    <div class="btn btn_l">&lt;</div>
    <div class="btn btn_r">&gt;</div>
</div>

2.代码——css样式

<style>
    *{
        padding:0px;
        margin:0px;
        list-style:none;
    }
    .banner {
        width:660px;
        height:200px;
        margin:100px auto;
        border:1px solid #808080;
        position:relative;
        overflow:hidden;
    }
    .banner .img{
        width:6600px;
        height:200px;
        position:absolute;
        left:0px;
        top:0px;
    }
    .banner .img img{
        width:660px;
        height:200px;
    }
    .banner .img li{
        float:left;
    }
    .banner .num {
        position:absolute;
        width:100%;
        bottom:10px;
        left:0px;
        text-align:center;
        font-size:0px;
    }
    .banner .num li {
        width:10px;
        height:10px;
        background-color:#888;
        border-radius:50%;
        display:inline-block;
        margin:0px 3px;
        cursor:pointer;}
    .banner .num li.on {
        background-color: #ff6a00;
    }
    .banner .btn {
        width: 30px;
        height: 50px;
        background-color: #808080;
        opacity: 0.5;
        filter:alpha(opacity:0.5);
        position:absolute;top:50%;
        margin-top:-25px;
        cursor:pointer;
        text-align:center;
        line-height:50px;
        font-size:40px;
        color:#fff;
        font-family:"宋体";
        display:none;
    }
    .banner .btn_l {
        left:0px;
    }
    .banner .btn_r {
        right:0px;
    }
    .banner:hover .btn {
        display:block;
    }

</style>

3.代码——js部分

<script>
    $(document).ready(function () {

        var i = 0;

        var clone = $(".banner .img li").first().clone();//克隆第一张图片
        $(".banner .img").append(clone);                //复制到列表最后
        var size = $(".banner .img li").size();         //返回匹配元素的数量
        console.log(size);

        /*循环图片容器的数量，并且向点点按钮的大容器添加几个子节点作为点点按钮*/
        for (var j = 0; j < size-1; j++) {
            $(".banner .num").append("<li></li>");
        }

        $(".banner .num li").first().addClass("on");

        /*自动轮播*/

        var t = setInterval(function () {
            i++;
            move();
            },2000);

        /*鼠标悬停事件*/

        $(".banner").hover(function () {
            clearInterval(t);//鼠标悬停时清除定时器
        }, function () {
            t = setInterval(function () {
                i++;
                move();
                }, 2000); //鼠标移出时开始定时器
        });




        /*鼠标滑入原点事件*/

        $(".banner .num li").hover(function () {

            var index = $(this).index();//获取当前索引值
            i = index;
            $(".banner .img").stop().animate({ left: -index * 660 }, 500);
            $(this).addClass("on").siblings().removeClass("on");
        });



        /*向左按钮*/
        $(".banner .btn_l").click(function () {
            i--;
            move();
        })


        /*向右按钮*/
        $(".banner .btn_r").click(function () {
            i++;
            move();
        })

        /*移动事件*/
        function move() {
            if (i == size) {
                $(".banner .img").css({ left: 0 });
                i = 1;
            }
            if (i == -1) {
                $(".banner .img").css({ left: -(size - 1) * 660 });
                i = size - 2;
            }
            $(".banner .img").stop().animate({ left: -i * 660 }, 660);

            if (i == size - 1) {
                $(".banner .num li").eq(0).addClass("on").siblings().removeClass("on");
            } else {
                $(".banner .num li").eq(i).addClass("on").siblings().removeClass("on");
            }
        }
    });
</script>

注意事项：html里面一定要引入jquery的js文件

<script src="../jquery-1.10.2/jquery-1.10.2/jquery.js"></script>

来源：CSDN

作者：orange-life

链接：https://blog.csdn.net/web_hua/article/details/77714602