无缝轮播

对于轮播，网上有好多的代码。但是，有好多的效果是我们用不到的。这里我给大家分享我自己写的简单的轮播，效果很简单。希望对大家有用。

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

　　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,
        iNowLeft,
        iNowRight;//首先显示第一张图
    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 () {
        var k=$(this).index();
        k=iNow;
        move();
    });
});

　　带按钮的轮播下次再和大家分享，这次就只和大家分享带圆点的无缝轮播。

猜你喜欢