JQuery实现带左右按钮的无缝轮播

带按钮的无缝轮播的原理是：在ul的两边多加两张图，在轮播的过渡的过程中就不会有空白的部分。

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>
    <!--左边按钮-->
    <img src="../img/turnLeft.png" class="iconLeft" alt="">
    <!--右边按钮-->
    <img src="../img/turnRight.png" class="iconRight" alt="">
</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部分

/*通用 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;
}
/*=====左右按钮====*/
.iconLeft,.iconRight{
    width: 80px;
    height: 180px;
    cursor: pointer;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
}
.iconLeft{
    left: 30px;
}
.iconRight{
    right: 30px;
}

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 = 1;//首先显示第一张图
    imgUl.css("width",(imgNumber+2)*imgWidth);//ul的长度
    //在ul后面加第一个li
    imgLi.first().clone().appendTo(imgUl);
    //在ul前面加最后一个li
    imgLi.last().clone().prependTo(imgUl);
    //由于现在第一张图是最后一张，要把第一张图前移
    imgUl.css("left",-imgWidth*iNow);
    function animate() {
        imgUl.animate({
            left : -imgWidth*iNow
        },speed,function () {
            if(iNow===imgNumber+1){
                iNow=1;
                imgUl.css("left",-imgWidth*iNow);//重置
            }
            dotUl.children(":eq("+(iNow-1)+")").addClass("dotHover").siblings().removeClass("dotHover");//小圆点也一起轮播
        });
    }
    //定时器
    function move() {
        timer=setInterval(function () {
            iNow++;
            animate();
        },wait);
    }
    move();
    //点击小圆点
    dotLi.on("click", function () {
        if (!$(this).hasClass("dotHover")) {
            $(this).addClass("dotHover").siblings().removeClass("dotHover");
        }
        iNow = $(this).index()+1;//获取被点击按钮的下标
        //图片过渡效果
        imgUl.animate({
            left:-imgWidth * iNow
        }, speed);
    });
    //鼠标移入圆点暂停定时器
    dotLi.mouseenter(function () {
        clearTimeout(timer);
    });
    //鼠标移出圆点开始轮播
    dotLi.mouseleave(function () {
       iNow=$(this).index()+1;
        move();
    });
    //点击左按钮
    $(".iconLeft").click(function () {
        clearTimeout(timer);
        iNow=dotLi.index($(".dotHover"));
        imgUl.animate({
            left : -imgWidth*iNow
        },speed,function () {
            if(iNow===0){
                iNow=imgNumber;
                imgUl.css("left",-imgWidth*iNow);//重置
            }
            dotUl.children(":eq("+(iNow-1)+")").addClass("dotHover").siblings().removeClass("dotHover");//小圆点也一起轮播
        });
        move();
    });
    //点击右按钮
    $(".iconRight").click(function () {
        clearTimeout(timer);
        iNow=dotLi.index($(".dotHover"))+2;
        animate();
        move();
    });
});

效果图

JQuery实现带左右按钮的无缝轮播

猜你喜欢