CSS如何实现轮播图功能

发布时间：2021-08-06 17:10:06 作者：chen
来源：亿速云阅读：167

本篇内容介绍了“CSS如何实现轮播图功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

实现思路

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如何实现轮播图功能

相关阅读