jQuery可任意修改轮播图大小的无缝轮播图

这个无缝轮播图比之前而言，加入了可随意在CSS样式中修改轮播图大小，JS中无需手动修改。

css样式：

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}



.banner {
    width: 500px;
    height: 300px;
    position: relative;
    border: 5px solid grey;
    margin: 100px auto;
    overflow: hidden;
}

.banner ul {
    position: absolute;
    width: 5000px;
    height: 300px;
}

.banner li {
    width: 500px;
    height: 300px;
    float: left;
}

.banner li img {
    width: 500px;
    height: 300px;
}

.arrow {
    display: none;
    width: 30px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: bisque;
    position: absolute;
    cursor: pointer;
    top: 50%;
    margin-top: -25px;
    color: #FFFFFF;
    font-size: 40px;
}

.arrow.arrow-left {
    left: 0px;
}

.arrow.arrow-right {
    right: 0px;
}
.banner:hover .arrow {
                display: block;
            }

/*分页器控件*/

.banner .icon {
    width: 100%;
    position: absolute;
    bottom: 20px;
    text-align: center;
}

.banner .icon span {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background-color: #888;
    border-radius: 50%;
    margin: 0px 5px;
    color: #FFFFFF;
}

.icon span.on {
    background-color: #ff6a00;
}

html代码：

<div class="banner">
            <ul>
                <li>
                    <a href="#"><img src="img/1.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="img/2.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="img/3.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="img/4.jpg" alt=""></a>
                </li>
                
            </ul>
            <!--箭头   方向控件-->
            
                <span class="arrow arrow-left">&lt;</span>
                <span class="arrow arrow-right">&gt;</span>
            
            <!--焦点控件   分页器控件-->
            <div class="icon">
    
            </div>
        </div>

JS代码：

$(function() {
    var index = 0; //计数器
    var lw=$(".banner ul li").width();//获取li的宽度
    //复制第一个li标签元素及其内容
    var firstImg = $(".banner ul li").eq(0).clone();
    $(".banner ul").append(firstImg);
    var imgLen = $(".banner ul li").length;

    //向左移动
    $(".arrow-left").click(function() {
        index--;
        move();
    })
    //向右移动
    $(".arrow-right").click(function() {
        index++;
        move();
    })

    //移动事件
    function move() {
        //当索引index=图片的长度为第五张（回到下标为1的图片)
        if(index == imgLen) {
            $(".banner ul").css("left", "0px");
            index = 1;
        }
        //当索引index为-1即克隆的那张，第一张下标为0，前面那张下标为-1（回到下标为4的图片)倒数第二张
        if(index == -1) {
            $(".banner ul").css("left", -(imgLen - 1) * lw + "px");
            index = imgLen - 2;
        }

        $(".banner ul").stop().animate({
            "left": -index * lw + "px"
        }, 500);

        if(index == imgLen - 1) {
            $(".banner .icon span ").eq(0).addClass("on").siblings().removeClass("on")

        } else {
            $(".banner .icon span ").eq(index).addClass("on").siblings().removeClass("on")
        }
    }
    //动态添加分页器内容
    for(var j = 1; j<imgLen; j++) {
        $(".banner .icon").append("<span>"+j+"</span>");
    }
    $(".banner .icon span ").eq(0).addClass("on").siblings().removeClass("on");

    /*自动轮播*/

    var timeId = setInterval(function() {
        index++;
        move();
    }, 1500);
    
    /*鼠标滑入原点事件*/
    $(".banner .icon span").mouseenter(function(){
        var x=$(this).index();//获取当前索引值
        index=x;
        $(".banner ul").stop().animate({"left":-index*lw+"px"},500);
        $(this).addClass("on").siblings().removeClass("on");
        
    })
    /*鼠标悬停事件*/

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

})

记得引用jQuery文件

<script type="text/javascript" src="js/jquery.js" ></script>