js实现图片无缝轮播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js实现图片无缝轮播</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<style>
    .b2{
        width: 200px;
        height: 200px;
        margin: 44px auto 0;
        position: relative;
        overflow: hidden;
        background-color: gray;
    }
    .b2 .b2list{
        width: 600px;
        height: 200px;
        position: absolute;
        top: 0;
        left: 0;
    }
    .b2 .item{
        width: 200px;
        height: 200px;
        float: left;
    }
    .b2 .item:nth-child(1) {
        background-image: url("https://ximg.2cq.com/img/system/ad/tieba/7665cfeb1b50e560693509b7a4045861.jpeg");
        background-size: 200px 200px;
    }
    .b2 .item:nth-child(2){
        background-image: url("https://ximg.2cq.com/img/system/ad/tieba/ee34f88f37b317849cc0e80076b89bab.jpeg");
        background-size: 200px 200px;
    }
    .b2 .item:nth-child(3){
        background-image: url("https://ximg.2cq.com/img/system/ad/tieba/1c9b819f1b9ede319e8e1b8ba63066e8.jpeg");
        background-size: 200px 200px;
    }
</style>
<body>
    <div class="b2">
        <div class="b2list" data="0">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
    </div>
    <script>
        $(function(){
            setInterval("auto_left_me();",3000);
        });
        function auto_left_me(){
            var num = $(".b2 .b2list").attr("data");
            num++;

            if(num>2){
                num=0;
            }
            $(".b2 .b2list").attr("data",num);
            $('.b2 .b2list').animate({'left':-200*num});
        }

    </script>
</body>
</html>

 

posted @ 2019-03-31 15:49  cl94  阅读(337)  评论(0编辑  收藏  举报