小米官网的全屏轮播图(jQuery)

其实可以看出来，布局和jQuery很简单 不算是一个完整的轮播图只是布局了动和鼠标移入移出事件 没有小圆点和左右的按钮
效果图

下面是HTML的代码
比较简单

 <div class="main">
        <div class="slide">
            <a href="#"><img
                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a185350fb3fd731d97f85e377fa34c0a.jpg?w=5120&h=1240&bg=DDE6F5"></a>
            <a href="#"><img
                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a185350fb3fd731d97f85e377fa34c0a.jpg?w=5120&h=1240&bg=DDE6F5"></a>
            <a href="#"><img
                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a185350fb3fd731d97f85e377fa34c0a.jpg?w=5120&h=1240&bg=DDE6F5"></a>
            <a href="#"><img
                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a185350fb3fd731d97f85e377fa34c0a.jpg?w=5120&h=1240&bg=DDE6F5"></a>

        </div>
    </div>

下面是css代码 我的是外链式的

.main {
    height: 620px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.main .slide {
    width: 800%;
    height: 100%;
    position: relative;
    left: 0;
}

.main .slide a {
    display: block;
    float: left;
    width: 2560px;
    height: 100%;
}

.main .slide a img {
    position: relative;
    left: 50%;
    margin-left: -1780px;
    width: 2560px;
    height: 100%;
}

jQuery代码

$(function () {
    // 图片数量
    var isNow = 0;
    //定时器
    var timer = null;
    timer = setInterval(function() {
        isNow++;
        tab()
    }, 3000);

// 自动播放的函数
    function tab() {
        if (isNow > 2) {
            // 如果大与第二张图的时候播放第三张如果让他回到第一张
            $(".slide").animate({ left: isNow * -2560 }, 1000)
            isNow = 0;
            $(".slide").animate({ left: isNow * -2560 }, 0)
        } else { 
            $(".slide").animate({ left: isNow * -2560 }, 1000)      
        }
    }
    // 鼠标经过的时候

    $(".slide").hover(function () {
        clearInterval(timer)
    }, function () {
        timer = setInterval(function() {
            isNow++;
            tab()
        }, 3000);
    })
})