最近我學習了使用HTML和jQuery來創建圖片輪播效果，這是一種非常流行的網頁設計技術。下面是一些示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圖片輪播效果</title>
<style>
#slider {
width: 80%;
margin: auto;
overflow: hidden;
}
#slider img {
width: 100%;
}
#slider-container {
width: 500%;
position: relative;
left: 0;
animation: slide 30s infinite;
}
#slider-container:hover {
animation-play-state: paused;
}
@keyframes slide {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}
</style>
</head>
<body>
<div id="slider">
<div id="slider-container">
<img src="img/image1.jpg">
<img src="img/image2.jpg">
<img src="img/image3.jpg">
<img src="img/image4.jpg">
<img src="img/image5.jpg">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
var height = $('#slider img').height();
$('#slider').css('height', height);
$(window).resize(function() {
var height = $('#slider img').height();
$('#slider').css('height', height);
});
});
</script>
</body>
</html>需要注意的是，CSS部分代碼通過設置animation屬性和keyframe實現輪播效果。在JavaScript的部分，使用jQuery來獲取圖片的高度，并隨著窗口大小的改變進行調整。
總之，HTML和jQuery提供了一個非常強大和令人愉悅的界面交互方式，可使您的網站更加有活力和吸引力。
上一篇axaj json