HTML幻燈片特效是網頁設計中常用的技巧之一，可以通過代碼的編寫實現不同效果的幻燈片展示，吸引用戶的注意力，提高網站的用戶體驗。
<html>
<head>
<title>HTML幻燈片示例</title>
<style>
/*定義幻燈片容器的樣式*/
#slideshow {
position: relative;
width: 600px;
height: 400px;
margin: 0 auto;
}
/*定義幻燈片圖片的樣式*/
#slideshow img {
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: opacity ease-in-out 1s;
}
/*定義幻燈片的動畫效果*/
#slideshow img.active {
opacity: 1;
}
/*定義幻燈片的控制按鈕樣式*/
#nav {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
#nav a {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ccc;
margin: 0 10px;
text-decoration: none;
}
#nav a.active {
background-color: #666;
}
</style>
</head>
<body>
<div id="slideshow">
<img src="img/slide1.jpg" class="active"/>
<img src="img/slide2.jpg"/>
<img src="img/slide3.jpg"/>
</div>
<div id="nav">
<a href="#" class="active"></a>
<a href="#"></a>
<a href="#"></a>
</div>
<script>
//定義變量
var slides = document.querySelectorAll('#slideshow img');
var navLinks = document.querySelectorAll('#nav a');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,3000);
//定義函數
function nextSlide() {
slides[currentSlide].className = ' ';
navLinks[currentSlide].className = ' ';
currentSlide = (currentSlide+1)%slides.length;
slides[currentSlide].className = 'active';
navLinks[currentSlide].className = 'active';
}
//事件處理
for(var i=0;i以上代碼實現的是一個基本的幻燈片特效，包含了幻燈片容器、圖片、動畫效果和控制按鈕等元素，并通過JavaScript實現了自動切換和手動切換兩種方式。
上一篇html年月日輸入框代碼
下一篇python 操作命令行