jQuery实现轮播图切换

近来时间有些闲暇，有空写一些东西了，从轮播图开始，就这么愉快的决定了，现在把我前天写的一个渐变方式的轮播分享出来，望大家给指导意见。

轮播嘛，几乎每个网站都有，几张大图，放一些醒目的活动或者公告，用户一眼就能看到。渐变方式的要比滑动方式的简单一点，因为它前后不需要前一页或下一页来衔接，它的原理也很简单，围绕图片的索引，依靠索引来切换。有难度一点的地方可能就在于索引是最后一张的时候要让它切到索引为0，以及点击左边按钮和点击右边按钮都能顺利切换，还有注意的一点是，每张图片定位在同一位置，这样渐变不会闪白。好了，下面上代码。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>轮播</title>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/lunbo.js"></script>
    <link rel="stylesheet" href="css/lunbo.css" />
</head>
<body>
    <div class="wrap">
        <div class="btnBox">
            <span id="left">&lt;</span>
            <span id="right">&gt;</span>
        </div>
        <div class="wraps">
            <img src="images/photo-1.jpg" />
            <img src="images/photo-2.jpg" />
            <img src="images/photo-3.jpg" />
        </div>
        <p class="page"></p>
    </div>
</body>
</html>

CSS：

*{
    margin:0;
    padding:0;
}
.wrap{
    width:400px;
    height: 300px;
    overflow: hidden;
    position: relative;
}
.wraps{
    width:1200px;
    height: 300px;
}
.wraps img{
    float: left;
    cursor: pointer;
    position: absolute;
    top:0;
    left:0;
}
.page{
    position: absolute;
    bottom:10px;
    right:10px;
}
.page span{
    float: left;
    width:20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    margin-left:10px;
    cursor: pointer;
}
.page span.current{
    background: rgba(0, 0, 0, 0.8);
}
.btnBox span{
    width:30px;
    height: 30px;
    display: inline-block;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 20px;
    text-align: center;
    line-height: 26px;
    cursor: pointer;
    position: absolute;
    top:50%;
    margin-top:-10px;
    z-index: 3;
}
#left{
    left:0;
}
#right{
    right:0;
}

jQuery：

$(function(){
    $(".wraps img:not(:first)").hide();
    var index = 0;
    var s = $(".wraps img").length;
    var auto;
    for(var i=1; i<=s; i++){
        $(".page").append("<span>" + i + "</span>");
    }
    $(".page span:first").addClass("current");
    $(".page span").on("click", function(){
        index = $(this).index();
        move();
    });
    function autos(){
        auto = setInterval(function(){
            index++;
            if(index == s){
                index = 0;
            }
            move();
        }, 3000);
    }
    autos();
    function move(){
        $(".page span").eq(index).addClass("current").siblings().removeClass('current');
        $(".wraps img").eq(index).stop(true, true).fadeIn().siblings().stop(true, true).fadeOut();
    }
    $("#left").click(function(){
        clearInterval(auto);
        index--;
        if(index <= -1){
            index = s-1;
        }
        move();
        autos();
    });
    $("#right").click(function(){
        clearInterval(auto);
        index++;
        if(index >= s){
            index = 0;
        }
        move();
        autos();
    });
    $(".wraps img, .page span").mouseover(function(){
        clearInterval(auto);
    }).mouseout(function(){
        autos();
    });
});

来源：http://www.cnblogs.com/zlts/p/8079165.html

标签

轮播

jquery