HTML5是一種新型的前端語言，它為圖片循環(huán)滾動(dòng)提供了非常便利的方法。圖片循環(huán)滾動(dòng)可以用于網(wǎng)站的輪播圖、廣告圖等。
下面我們來分享一下HTML5實(shí)現(xiàn)圖片循環(huán)滾動(dòng)的代碼：
<html>
<head>
<style>
/* 設(shè)置圖片容器的樣式 */
#scrollBox {
width: 400px;
height: 300px;
overflow: hidden;
border: 1px solid #ccc;
margin: 0 auto;
position: relative;
}
/* 設(shè)置圖片的樣式 */
#scrollBox img {
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: opacity 1s ease;
}
/* 設(shè)置第一張圖片的樣式 */
#scrollBox img:first-child {
opacity: 1;
}
/* 設(shè)置按鈕的樣式 */
#scrollBtn {
width: 60px;
height: 60px;
background: #555;
position: absolute;
top: 50%;
margin-top: -30px;
z-index: 100;
cursor: pointer;
}
/* 設(shè)置按鈕上下箭頭的樣式 */
#scrollBtn span {
width: 20px;
height: 20px;
border-width: 10px 7px 0px 7px;
border-style: solid;
border-color: #ccc transparent transparent transparent;
display: block;
margin: 0 auto;
}
/* 設(shè)置按鈕下箭頭的樣式 */
#scrollBtn span.down {
transform: rotate(180deg);
}
</style>
</head>
<body>
<div id="scrollBox">
<img src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
<img src="img/4.jpg" />
</div>
<div id="scrollBtn"><span class="up"></span></div>
<script>
var scrollBox = document.querySelector('#scrollBox');
var scrollBtn = document.querySelector('#scrollBtn');
var imgs = document.querySelectorAll('#scrollBox img');
var index = 1;
/* 設(shè)置按鈕點(diǎn)擊事件 */
scrollBtn.onclick = function() {
if (scrollBox.className === 'scroll') {
scrollBox.className = '';
} else {
scrollBox.className = 'scroll';
}
}
/* 設(shè)置圖片滾動(dòng)的函數(shù) */
function scroll() {
index++;
if (index >imgs.length) {
index = 1;
}
for (var i = 0; i< imgs.length; i++) {
imgs[i].style.opacity = 0;
}
imgs[index - 1].style.opacity = 1;
}
/* 設(shè)置定時(shí)器 */
setInterval(scroll, 3000);
</script>
</body>
</html>上述代碼中，我們首先設(shè)置了圖片容器和圖片的樣式。其中，圖片容器設(shè)置了寬度、高度和邊框等基本屬性，并設(shè)置了position: relative，使圖片可以按絕對定位進(jìn)行布局。圖片也設(shè)置了position: absolute，并設(shè)置了opacity: 0，使其隱藏起來。
在JS代碼中，我們首先獲取了圖片容器、按鈕和所有圖片標(biāo)簽的DOM對象。然后，我們設(shè)置了按鈕的點(diǎn)擊事件，當(dāng)點(diǎn)擊按鈕時(shí)，為圖片容器添加或刪除'scroll'類，通過CSS中的過渡效果實(shí)現(xiàn)了圖片滾動(dòng)的動(dòng)畫效果。
最后，我們使用setInterval函數(shù)，每隔3秒鐘調(diào)用一次scroll函數(shù)，使圖片逐漸透明并呈現(xiàn)出下一張圖片。
通過這段代碼，我們可以輕松地實(shí)現(xiàn)圖片的循環(huán)滾動(dòng)效果。如果希望設(shè)置滾動(dòng)速度、滾動(dòng)方向等其他效果，也可以在代碼中進(jìn)行相應(yīng)的修改。