HTML是一種標記語言，常常用于制作網頁。在網頁中，輪播圖常常用于展示多張圖片或信息，非常實用。下面是HTML實現簡單輪播的代碼：
<!DOCTYPE html>
<html>
<head>
<title>輪播圖</title>
<style>
img {
width: 100%;
height: 100%;
}
#slider {
height: 300px;
width: 500px;
overflow: hidden;
}
#slider ul {
list-style: none;
margin: 0;
padding: 0;
width: 400%;
}
#slider li {
float: left;
width: 20%;
}
</style>
</head>
<body>
<div id="slider">
<ul>
<li><img src="image1.jpg"></li>
<li><img src="image2.jpg"></li>
<li><img src="image3.jpg"></li>
<li><img src="image4.jpg"></li>
<li><img src="image5.jpg"></li>
</ul>
</div>
<script>
var slider = document.getElementById("slider");
var ul = slider.getElementsByTagName("ul")[0];
var li = ul.getElementsByTagName("li");
var liWidth = li[0].offsetWidth;
var len = li.length;
var timer = null;
var speed = 5000;
var index = 0;
ul.style.width = liWidth * len + "px";
function move() {
timer = setInterval(function() {
index++;
index = index === len ? 0 : index;
ul.style.left = -index * liWidth + "px";
}, speed);
}
slider.onmouseenter = function() {
clearInterval(timer);
}
slider.onmouseleave = function() {
move();
}
move();
</script>
</body>
</html>上面的代碼實現了一個基礎的輪播圖，包括左右切換和自動輪播功能。在HTML中，使用ul和li標簽來顯示圖片，使用JavaScript來控制輪播效果，因此需要在HTML頭部引入css和js文件。
上一篇layui改成vue
下一篇avro json格式