CSS实现轮播图的方法

2024-07-16 来源：飒榕旅游网

实现思路

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>

以上就是CSS实现轮播图的方法，希望对大家有所帮助。更多css学习指路：

本文教程操作环境：windows7系统、css3版，DELL G3电脑。

显示全文

全部栏目

CSS实现轮播图的方法