ChatGBT note 032123

Q: 請幫我寫一組網站首頁大圖輪播的jquery碼，五張圖片輪播，被輪播到的大圖會顯示標題文字

A: 以下是一個簡單的 jQuery 輪播示範，可輪播 5 張圖片，並在輪播到該圖片時顯示標題文字。

HTML 標記:

<div id="slideshow">
<ul>
<li>
<img src="img1.jpg">
<div class="caption">標題文字 1</div>
</li>
<li>
<img src="img2.jpg">
<div class="caption">標題文字 2</div>
</li>
<li>
<img src="img3.jpg">
<div class="caption">標題文字 3</div>
</li>
<li>
<img src="img4.jpg">
<div class="caption">標題文字 4</div>
</li>
<li>
<img src="img5.jpg">
<div class="caption">標題文字 5</div>
</li>
</ul>
</div>

CSS 樣式:

#slideshow {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}

#slideshow ul {
list-style: none;
margin: 0;
padding: 0;
width: 500%;
height: 400px;
position: relative;
left: 0;
transition: left 500ms ease-in-out;
}

#slideshow li {
float: left;
width: 20%;
height: 100%;
}

#slideshow img {
width: 100%;
height: 100%;
object-fit: cover;
}

#slideshow .caption {
position: absolute;
bottom: 20px;
left: 20px;
color: white;
font-size: 24px;
font-weight: bold;
text-shadow: 1px 1px black;
}

jQuery 腳本:

$(document).ready(function() {
// 初始化輪播位置和標題文字
var index = 0;
showCaption(index);

// 設定輪播間隔和動畫
var interval = setInterval(function() {
index++;
if (index > 4) {
index = 0;
}
showCaption(index);
$('#slideshow ul').animate({ left: -index * 100 + '%' }, 500);
}, 5000);

// 當滑鼠移入輪播區域時停止輪播
$('#slideshow').mouseenter(function() {
clearInterval(interval);
});

// 當滑鼠離開輪播區域時開始輪播
$('#slideshow').mouseleave(function() {
interval = setInterval(function() {
index++;
if (index > 4) {
index = 0;
}
showCaption(index);
$('#slideshow ul').animate({ left: -index * 100 + '%' }, 500);
}, 5000);
});

// 顯示標題文字
function showCaption(index) {
var caption = $('#slideshow ul li').eq(index).find('.caption').html();
$('#