CSS可以实现无缝轮播的效果,这个效果很常见,比如广告图轮播、商品列表轮播等。
实现无缝轮播的核心原理是当滚动到最后一个元素时,直接跳转到第一个元素,形成一个无限循环。通过CSS的动画和过渡实现元素的滚动和切换。具体实现如下:
.carousel { display: flex; overflow: hidden; } .carousel__item { flex-shrink: 0; } .carousel__wrapper { display: flex; flex-wrap: nowrap; transition: transform 0.5s; } .carousel__wrapper--clone { transition: none; } .carousel__wrapper__item { flex-shrink: 0; } .carousel__button--next, .carousel__button--prev { cursor: pointer; } .carousel__button--next { margin-left: auto; } .carousel__button--prev:hover, .carousel__button--next:hover { background-color: rgba(0, 0, 0, 0.1); } .carousel__button--disabled { opacity: 0.5; pointer-events: none; }
具体的HTML布局由需求而定,这里不讨论具体实现。核心代码在于.carousel__wrapper和.carousel__wrapper--clone,前者为轮播项的容器,后者为复制的轮播项容器。通过transition属性控制切换时视觉效果。CSS实现的无缝轮播相比JavaScript实现的好处在于性能优化更容易,而且兼容性更好。