HTML是網頁開發中最基礎的語言，掌握HTML可以實現豐富的網頁效果。其中一個重要的效果就是滑動效果。下面提供一份HTML實現滑動效果代碼：
<!DOCTYPE html>
<html>
<head>
<title>滑動效果</title>
<style>
.slider {
width: 300px;
height: 200px;
overflow: hidden;
}
.slider-inner {
width: 600px;
height: 200px;
position: relative;
transition: transform 1s;
}
.slider-item {
width: 300px;
height: 200px;
float: left;
}
.slider-nav {
display: flex;
justify-content: center;
margin-top: 20px;
}
.slider-nav button {
margin-right: 10px;
}
</style>
</head>
<body>
<div class="slider">
<div class="slider-inner">
<div class="slider-item"><img src="img1.jpg" alt="圖片1"></div>
<div class="slider-item"><img src="img2.jpg" alt="圖片2"></div>
<div class="slider-item"><img src="img3.jpg" alt="圖片3"></div>
</div>
</div>
<div class="slider-nav">
<button class="prev">上一頁</button>
<button class="next">下一頁</button>
</div>
<script>
var prev = document.querySelector(".prev");
var next = document.querySelector(".next");
var inner = document.querySelector(".slider-inner");
var current = 0;
prev.onclick = function() {
if (current > 0) {
current--;
inner.style.transform = "translateX(-" + (current * 300) + "px)";
}
};
next.onclick = function() {
if (current < 2) {
current++;
inner.style.transform = "translateX(-" + (current * 300) + "px)";
}
};
</script>
</body>
</html>這個HTML代碼實現了一個簡單的輪播圖，通過點擊上一頁、下一頁按鈕可以切換圖片。其中采用了CSS的transition屬性實現了動畫效果，采用了JavaScript實現了點擊按鈕時改變translateX的值實現圖片切換。通讀這份代碼可以讓我們更深入理解HTML的應用方法。
上一篇c 空json對象
下一篇vue huakuai