HTML圖片輪播是網(wǎng)頁設(shè)計中常用的效果，可以讓網(wǎng)頁更具動感和視覺吸引力。其中，數(shù)字是一個常見的輪播效果元素，用于顯示圖片的序號、數(shù)量等信息。下面是一個HTML圖片輪播代碼，細節(jié)部分使用了數(shù)字的效果：
<html>
<head>
<title>HTML圖片輪播-數(shù)字效果</title>
<style>
#slider {
position: relative;
overflow: hidden;
width: 800px;
height: 400px;
margin: 0 auto;
border: 3px solid #ccc;
}
#slider img {
position: absolute;
top: 0;
left: 0;
width: 800px;
height: 400px;
display: none;
}
#slider img:first-child {
display: block;
}
#slider p {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 20px;
font-weight: bold;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="slider">
<img src="img/1.jpg" alt="圖片1">
<img src="img/2.jpg" alt="圖片2">
<img src="img/3.jpg" alt="圖片3">
<img src="img/4.jpg" alt="圖片4">
<img src="img/5.jpg" alt="圖片5">
<p id="index">1 / 5</p>
</div>
<script>
window.onload = function () {
var index = 1;
var timer = null;
var imgs = document.getElementById("slider").getElementsByTagName("img");
var indexP = document.getElementById("index");
change(index);
play();
document.getElementById("slider").onmouseover = function () {
clearInterval(timer);
}
document.getElementById("slider").onmouseout = function () {
play();
}
function play() {
timer = setInterval(function () {
index++;
if (index >imgs.length) {
index = 1;
}
change(index);
}, 3000);
}
function change(index) {
for (var i = 0; i< imgs.length; i++) {
imgs[i].style.display = "none";
}
imgs[index - 1].style.display = "block";
indexP.innerHTML = index + " / " + imgs.length;
}
}
</script>
</body>
</html>這段代碼中，輪播效果主要使用了CSS的position屬性和JavaScript的setInterval函數(shù)。在HTML中，圖片使用img標簽呈現(xiàn)，數(shù)字顯示使用p標簽，并為數(shù)字效果設(shè)置了一些CSS樣式相應修改顯示。