使用jQuery实现无缝轮播图

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: 14px;
            }
            
            .banner .num li {
                width: 20px;
                height: 20px;
                background-color: #888;
                border-radius: 50%;
                display: inline-block;
                margin: 0px 3px;
                cursor: pointer;
                text-align: center;
                line-height: 18px;
                color: #FFFFFF !important;
            }
            
            .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>

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>
                <li><img src="img/5.jpg" alt="" /></li>
            </ul>
            <ul class="num">

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

jQuery代码：
1.首先引用jQuery文件
<script type="text/javascript" src="js/jquery.js"></script>
2.jQuery：

<script>
            $(document).ready(function() {
                var total = 0;//计数器

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

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

                /*自动轮播*/

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

                /*鼠标悬停事件*/

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

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

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

                /*向左按钮*/
                $(".banner .btn_l").click(function() {
                    total--;
                    move();
                }) /*向右按钮*/
                $(".banner .btn_r").click(function() {
                    total++;
                    move();
                }) /*移动事件*/
                function move() {
                    if(total == size) {
                        $(".banner .img").css({
                            left: 0
                        });
                        total = 1;
                    }
                    if(total == -1) {
                        $(".banner .img").css({
                            left: -(size - 1) * 660
                        });
                        total = size - 2;
                    }
                    $(".banner .img").stop().animate({
                        left: -total * 660
                    }, 660);

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