JQuery实现图片无缝轮播

我这里实现无缝轮播的思路是：在ul后面多加第一个li。在轮播的时候，最后一张到第一张的时候，如果不多加第一的li的话，会在过渡的时候出现空白的效果。用加的li来替代空白的效果，在视觉上给人没有空白的效果，是循环的。

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播</title>
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>
<div class="carouselContainer">
    <!--轮播图-->
    <ul class="carouselContent clear">
        <li class="carouselContentList">
            <a href="">
                <img src="../img/1.jpg" class="carouselImg" alt="">
            </a>
        </li>
        <li class="carouselContentList">
            <a href="">
                <img src="../img/2.jpg" class="carouselImg" alt="">
            </a>
        </li>
        <li class="carouselContentList">
            <a href="">
                <img src="../img/3.jpg" class="carouselImg" alt="">
            </a>
        </li>
        <li class="carouselContentList">
            <a href="">
                <img src="../img/4.jpg" class="carouselImg" alt="">
            </a>
        </li>
        <li class="carouselContentList">
            <a href="">
                <img src="../img/5.jpg" class="carouselImg" alt="">
            </a>
        </li>
    </ul>
    <!--小圆点-->
    <ul class="dotContent clear"></ul>
</div>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/index.js"></script>
</body>
</html>

CSS部分

/*1、通用 CSS ：大部分元素具备的样式*/
body{
    font:12px "microsoft yahei",Arial,Helvetica,sans-serif;
    color:#000304;
    margin:0;
    background-color: #fff;
    overflow-x: hidden;
}
p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd{
    margin:0;
    padding:0;
    list-style:none;
}
img{
    vertical-align:middle;
}
a{
    color:#000304;
    text-decoration:none;
}
a:hover{
    text-decoration:none;
}
a:focus{
    text-decoration:none;
}
.lf{float:left;}
.rt{float:right;}
.clear:after{
    content: ' ';
    display: table;
    clear: both;
}
.clear{
    clear: both;
}
/*======轮播图=====*/
.carouselContainer{
    width: 1200px;
    height: 600px;
    margin: 100px auto 0 auto;
    overflow: hidden;
    position: relative;
}
.carouselContent{
    position: relative;
    height: 600px;
}
.carouselContentList{
    float: left;
    width: 1200px;
    height: 600px;
}
.carouselContentList>a{
    display: block;
    width: 1200px;
    height: 600px;
}
.carouselImg{
    width: 1200px;
    height: 600px;
}
/*===小圆点==*/
.dotContent{
    height: 10px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5%;
}
.dotContent>li{
    float: left;
    width: 28px;
    height: 10px;
    margin-left: 8px;
    border-radius: 5px;
    cursor: pointer;
    background-color: #999;
}
.dotContent>li.dotHover{
    background-color: #fff;
}

JS部分

$(document).ready(function () {
    var dotUl=$(".dotContent"),
        imgLi=$(".carouselContent>li"),
        imgNumber=imgLi.length;
    //根据图片的个数设置小圆圈的个数
    for(var i=0,str="";i<imgNumber;i++){
        str+="<li></li>";
    }
    dotUl.html(str).children(":first").addClass("dotHover");//设置默认第一个li为hover
    var dotLi= $(".dotContent>li"),//获取按钮
        dotUlWidth= Math.round(dotLi.outerWidth(true)),
        dotLiMargin= Math.round(dotLi.outerWidth(true)-dotLi.outerWidth());//获取margin-left的值
    $(".dotContent li").first().css("margin-left",0);//第一个li margin-left:0;
    dotUl.css("width",imgNumber*dotUlWidth-dotLiMargin);//dot的ul的长度
    var imgUl=$(".carouselContent"),
        imgWidth=$(".carouselImg").width(),
        wait=3000,  //轮播的时间
        speed=500,//每次轮播的时间
        timer=null,//保存一次性定时器的序号
        iNow = 0;//首先显示第一张图
    imgUl.css("width",(imgNumber+1)*imgWidth);//ul的长度
    //在ul后面加第一个li
    $(".carouselContent li").first().clone().appendTo(imgUl);
    //定时器
    function move() {
        timer=setInterval(function () {
            iNow++;
            imgUl.animate({
                left : -imgWidth*iNow
            },speed,function () {
                if(iNow===imgNumber){
                    iNow=0;
                    imgUl.css("left","");//重置
                }
                dotUl.children(":eq("+iNow+")").addClass("dotHover").siblings().removeClass("dotHover");//小圆点也一起轮播
            });
        },wait);
    }
    move();//启动第一次
    //点击按钮
    dotLi.on("click", function () {
        if (!$(this).hasClass("dotHover")) {
            $(this).addClass("dotHover").siblings().removeClass("dotHover");
        }
        iNow = $(this).index();//获取被点击按钮的下标
        //图片过渡效果
        imgUl.animate({
            left:-imgWidth * iNow
        }, speed);
    });
    //鼠标移入圆点暂停定时器
    dotLi.mouseenter(function () {
        clearTimeout(timer);
    });
    //鼠标移出圆点开始轮播
    dotLi.mouseleave(function () {
        iNow=$(this).index();
        move();
    });
});

JQuery实现图片无缝轮播

猜你喜欢