Jquery无缝轮播图

无缝轮播图示例如下

注意事项 html里面一定要引入jquery的js文件
Jquery下载地址

HTML代码

<div class="banner">
    <ul class="img">
        <li><img src="./image/001.jpg" /></li>
        <li><img src="./image/002.jpg" /></li>
        <li><img src="./image/003.jpg" /></li>
        <li><img src="./image/004.jpg" /></li>
        <li><img src="./image/005.jpg" /></li>
        <li><img src="./image/006.jpg" /></li>
    </ul>
    <ul class="num">

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

CSS代码

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

Jquery代码段

<script type="text/javascript">
$(document).ready(function(){
    var i = 0;
    var clone = $(".banner .img li").first().clone();      //克隆第一张图片
    $(".banner .img").append(clone);                       //复制到列表最后
    var size = $(".banner .img li").size();                    //返回匹配元素的数量
    var oneWidth = $(".banner").find(".img li").width();   //图片宽度
    console.log(size);

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

    //自动轮播
    var timer = setInterval(function(){
        i++;
        move();
    },1000);

    //鼠标悬停事件
    $(".banner").hover(function(){
        clearInterval(timer);
        $(".banner .btn").css({opacity:0.5});      //隐入隐出左右按钮
    },function(){
        timer = setInterval(function(){
            i++;
            move();
        },1000);
        $(".banner .btn").css({opacity:0});
    });

    //鼠标滑入原点事件
    $(".banner .num li").hover(function(){
        var num = $(this).index();
        i = num;
        $(".banner .img").stop().animate({left: -(i * oneWidth)},600);
        $(".banner .num li").eq(i).addClass("on").siblings().removeClass("on");
    })

    //向左按钮
    $(".banner .btn_1").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) * oneWidth});
            i = size - 2;
        }
        $(".banner .img").stop().animate({left:-(i * oneWidth)},600);

        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>