使用jQuery實現一個簡單的圖片輪播器
要求：
1. 創建一個HTML頁面，其中包含至少三張圖片，並使用`<img>`標簽顯示它們。
2. 使用jQuery和JavaScript編寫代碼，使這些圖片能夠自動輪播，每隔3秒鐘更換一張圖片。
3. 在輪播圖片的同時，添加簡單的淡入淡出效果。
4. 提供一個“停止”按鈕，點擊後可以停止圖片輪播。
5. 提供一個“開始”按鈕（如果輪播已停止），點擊後可以重新開始圖片輪播。
提示：
- 你可以使用CSS來設置圖片的基本樣式，如寬度、高度和邊距等。
- 使用jQuery的`.fadeIn()`和`.fadeOut()`方法來實現圖片的淡入淡出效果。
- 使用JavaScript的`setInterval()`函數來設置圖片的自動更換時間。
- 使用jQuery的`.click()`方法來處理按鈕的點擊事件。
- 使用一個全局變量來跟蹤輪播器的狀態（是否正在輪播）。
示例HTML結構：
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>簡單圖片輪播器</title>
<style>
#slideshow {
position: relative;
width: 500px;
height: 300px;
margin: 0 auto;
overflow: hidden;
}
#slideshow img {
position: absolute;
top: 0;
left: 0;
display: none;
}
#slideshow img.active {
display: block;
}
</style>
<script src="https://dm.qunapu.com/jquery/jquery.min.js"></script>
<script>
$(document).ready(function() {
var current = 0;
var images = $('#slideshow img');
var imageCount = images.length;
function slideshow() {
images.eq(current).fadeOut(500, function() {
current = (current + 1) % imageCount;
images.eq(current).fadeIn(500);
});
}
var slideshowInterval = setInterval(slideshow, 3000); // 每3秒更換圖片
// 停止輪播功能
$('#stop').click(function() {
clearInterval(slideshowInterval);
});
// 開始輪播功能
$('#start').click(function() {
slideshowInterval = setInterval(slideshow, 3000);
});
});
</script>
</head>
<body>
<div id="slideshow">
<img src="https://dm.qunapu.com/daima/jstubo/img/8.jpg">
<img src="https://dm.qunapu.com/daima/jstubo/img/9.jpg">
<img src="https://dm.qunapu.com/daima/jstubo/img/10.jpg">
</div>
<button id="stop">停止輪播</button>
<button id="start">開始輪播</button>
</body>
</html>註意：你需要創建`styles.css`和`script.js`文件，並在其中編寫相應的CSS樣式和JavaScript代碼來實現題目要求。
