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>