CSS实现轮播图的方法

Z时代
2024-01-10
分类：综合

美女程序员鼓励师

实现思路

1、通过animation达到动起来的效果，具体变化似乎有两种可行方式：

2、在动画中，通过CSS-transform不断平移轮播图元素位置。

3、在动画中，设置不同的left值。

实现效果与代码

其中值得注意的点在于需要手动在轮播图头部添加最后一张图的复制，否则会有明显的闪动效果。

实例

<!DOCTYPE html>
 
<body>
    <div style="flex: 1;height: 300px;z-index: 10;box-shadow: inset 0 0 300px rgba(0, 0, 0, 0.99);">
        left
    </div>
    <div class="showbox border box-shadow">
        <div class="left border">
            左
        </div>
        <div class="right border">
            右
        </div>
        <div id="imgbox" class="center imgbox">
            <img src="https://cdn.pixabay.com/photo/2018/01/03/05/33/the-sun-3057622__340.jpg" />
            <img src="https://cdn.pixabay.com/photo/2021/07/29/20/23/mountains-6508015_960_720.jpg" />
            <img src="https://cdn.pixabay.com/photo/2021/07/29/21/03/cereals-6508088__340.jpg" />
            <img src="https://cdn.pixabay.com/photo/2018/01/03/05/33/the-sun-3057622__340.jpg" />
        </div>
    </div>
    <div  style="flex: 1;height: 300px;z-index: 10;box-shadow: inset 0 0 300px rgba(0, 0, 0, 0.99);" >
        right
    </div>
</body>
<!-- <script>
    let a = 0
    let max = 300 * 3;
    window.onload = function() {
        refresh();
    }
 
    function refresh() {
        document.getElementById("imgbox").style.left = a + "px";
    }
 
    function left() {
        a = (a-300)%max;
        refresh();
    }
 
    function right () {
        a = (a+300)%max;
        refresh();
    }
 
</script> -->
<style>
    body {
        width: 100%;
        height: 100%;
        z-index: 0;
        /* background-color: rgba(0, 0, 0, 0.5); */
        box-shadow: inset 0 0 300px rgba(0, 0, 0, 0.1);
    }
 
    .center {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
 
    .showbox {
        width: 300px;
        height: 300px;
        /* background: chocolate; */
        position: relative;
        overflow: visible;
 
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        /* z-index: -1; */
        opacity: 1;
    }
 
    .left {
        position: absolute;
        left: 0;
        top: 50%;
        cursor: pointer;
        background: blue;
        z-index: 100;
    }
 
    .right {
        position: absolute;
        right: 0;
        top: 50%;
        cursor: pointer;
        background: blue;
        z-index: 100;
    }
 
    .border {
        border: 1px solid black;
    }
 
    .centerimg {
        width: 100%;
        height: 100%;
    }
 
    .myimg {
        width: 300px;
        height: 300px;
        z-index: -1;
        opacity: 1;
        /* filter: alpha(opacity=60); */
    }
    .imgbox {
        position: absolute;
        left: -600px;
        top: 0;
        z-index: -1;
        animation: slideshow 10s both infinite;
    }
 
    @keyframes slideshow {
        0% {
            left: -900px;
        }
        33% {
            left: -600px;
        }
        66% {
            left: -300px;
        }
        100% {
            left: 0;
        }
    }
</style>
 
</html>