CSS窗口變成輪播圖，是一種常用的網頁設計技巧，通過CSS樣式的設置，讓窗口內的內容自動切換，呈現出輪播圖的效果。下面我們來看一下如何實現：
<html>
<head>
<style>
.container {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
}
.slides {
position: absolute;
left: 0;
top: 0;
width: 500%;
height: 100%;
}
.slide {
float: left;
width: 20%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 72px;
color: #ffffff;
}
.slide:nth-child(1) {
background-color: #1abc9c;
}
.slide:nth-child(2) {
background-color: #2c3e50;
}
.slide:nth-child(3) {
background-color: #3498db;
}
.slide:nth-child(4) {
background-color: #e67e22;
}
.slide:nth-child(5) {
background-color: #e74c3c;
}
.button {
position: absolute;
left: 50%;
bottom: 20px;
transform: translate(-50%, -50%);
}
.button span {
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
border-radius: 50%;
background-color: #ffffff;
cursor: pointer;
}
.button span.active {
background-color: #1abc9c;
}
</style>
</head>
<body>
<div class="container">
<div class="slides">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
<div class="slide">5</div>
</div>
<div class="button">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("slide");
var dots = document.getElementsByClassName("button")[0].getElementsByTagName("span");
if (n >slides.length) {slideIndex = 1}
if (n< 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.left = -(slideIndex-1)*100/5 + "%";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 3000);
}
</script>
</body>
</html>以上是一個簡單的CSS窗口變成輪播圖的示例代碼，通過修改樣式、設置JavaScript函數，可以根據需求進行自定義。希望這篇文章可以對大家有所幫助！
上一篇css空白格
下一篇mysql完全安裝到d盤