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>
巴特西

js实现图片无缝轮播

最新文章

热门文章
