html css 3D輪播圖

阿新 • • 發佈：2020-09-02

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title Page</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
 rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>

</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .demo {
        position: relative;
        height: 320px;
        /*margin-top: 1rem;*/
        width 
: 100%
    }

    .demo .item {
        position: absolute;
        left: 50%;
        bottom: 0;
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
        -webkit-transition: all 0.6s;
        transition: all 0.6s;
        width: 222px;
        height: 300px;
        /* 
border: 1px solid #ccc;*/
        text-align: center;
        line-height: 300px;
        z-index: 1;
        font-size: 74px;
        color: #fff;
    }

    .demo .item_cur {
        z-index: 3
    }

    .demo .item_0 {
        -webkit-transform: translate3d(-104%, 12%, 0) scale3d(0.5, 0.5, 1);
        transform: translate3d(-104%, 12%, 0) scale3d(0.5, 0.5, 1)
    }

    .demo .item_1 {
        -webkit-transform: translate3d(-81%, 9%, 0) scale3d(0.7, 0.7, 1);
        transform: translate3d(-81%, 9%, 0) scale3d(0.7, 0.7, 1);
        z-index: 2
    }

    .demo .item_3 {
        -webkit-transform: translate3d(-20%, 9%, 0) scale3d(0.7, 0.7, 1);
        transform: translate3d(-20%, 9%, 0) scale3d(0.7, 0.7, 1);
        z-index: 2
    }

    .demo .item_4 {
        -webkit-transform: translate3d(4%, 12%, 0) scale3d(0.5, 0.5, 1);
        transform: translate3d(4%, 12%, 0) scale3d(0.5, 0.5, 1)
    }

    .demo_btn {
        text-align: center;
    }
</style>

<body>
    <div class="demo">
        <div class="item item_0">1</div>
        <div class="item item_1">2</div>
        <div class="item item_cur">3</div>
        <div class="item item_3">4</div>
        <div class="item item_4">5</div>
    </div>
    <div class="demo_btn">
        <a href="javascript:;" class="left" title="向左移動">&lt;&lt;</a>
        <a href="javascript:;" class="right" title="向右移動">&gt;&gt;</a>
        <p>（PC下可點選按鈕切換，移動端可左右滑動切換）</p>
    </div>
</body>
<script>
    (function () {
        var getRandomColor = function () {
            return '#' + Math.floor(Math.random() * 16777215).toString(16);
        }

        var egg_change = function (type) {
            var $demo = $('.demo'),
                index = parseInt($demo.attr('index_cur') || 2),
                $item = $('.demo .item'),
                len = $item.length;

            if (type == 'left') {
                index = (index + 1) % len;
            } else {
                index = (index - 1 + len) % len;
            }
            $demo.attr('index_cur', index);

            $item.removeClass('item_0 item_1 item_3 item_4 item_cur');

            $item.eq((index - 2 + len) % len).addClass('item_0');
            $item.eq((index - 1 + len) % len).addClass('item_1');
            $item.eq(index).addClass('item_cur');
            $item.eq((index + 1) % len).addClass('item_3');
            $item.eq((index + 2) % len).addClass('item_4');
        }

        $('.item').each(function () {
            $(this).css('background-color', getRandomColor());
        })

        $('.demo').on('swipeLeft', function () {
            egg_change('left');
        }).on('swipeRight', function () {
            egg_change('right');
        });

        $('.demo_btn').on('click', '.left', function () {
            egg_change('left');
        }).on('click', '.right', function () {
            egg_change('right');
        })
    })();
</script>

</html>