HTML滑動(dòng)圖片是一種常見的Web設(shè)計(jì)技術(shù)，它可以讓網(wǎng)頁(yè)中的圖片動(dòng)起來，吸引用戶的注意力。下面是一個(gè)簡(jiǎn)單的HTML滑動(dòng)圖片代碼實(shí)例：
<html>
<head>
<title>HTML滑動(dòng)圖片</title>
<style>
.slide-container{
position:relative;
width:100%;
height:400px;
overflow:hidden;
}
.slide-item{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
transition:opacity .5s ease-in-out;
}
.slide-item.active{
opacity:1;
}
.slide-item img{
width:100%;
height:auto;
}
</style>
</head>
<body>
<div class="slide-container">
<div class="slide-item active">
<img src="image1.jpg" alt="">
</div>
<div class="slide-item">
<img src="image2.jpg" alt="">
</div>
<div class="slide-item">
<img src="image3.jpg" alt="">
</div>
<div class="slide-item">
<img src="image4.jpg" alt="">
</div>
</div>
<script>
var slides = document.querySelectorAll('.slide-item');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,5000);
function nextSlide() {
slides[currentSlide].className = 'slide-item';
currentSlide = (currentSlide+1)%slides.length;
slides[currentSlide].className = 'slide-item active';
}
</script>
</body>
</html>代碼解釋：
這段代碼創(chuàng)建了一個(gè)包含四張圖片的滑動(dòng)容器，每五秒自動(dòng)滑動(dòng)到下一張圖片。具體的實(shí)現(xiàn)方式是使用position:absolute將所有的圖片疊在一起，并通過opacity屬性控制當(dāng)前顯示的圖片。在JavaScript中，使用setInterval函數(shù)定時(shí)執(zhí)行nextSlide函數(shù)，通過修改CSS類名的方式實(shí)現(xiàn)滑動(dòng)。通過修改這段代碼中的圖片鏈接和CSS樣式，可以實(shí)現(xiàn)自己想要的滑動(dòng)效果。