jQuery Banner是一種在網頁上展示圖片的方法。在實現過程中，可以使用jQuery的animate效果，制作出動畫效果豐富的Banner。不僅如此，jQuery也提供了豐富的文本操作方法，使我們可以在Banner中添加文字等元素，使Banner更具有豐富性和有趣性。
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
// 設置圖片數組和文字數組
var imgArr = ["img1.jpg", "img2.jpg", "img3.jpg"];
var textArr = ["這是圖片1的介紹", "這是圖片2的介紹", "這是圖片3的介紹"];
var count = 0;
// 加載圖片和文字
function loadImgText() {
$("#myBanner").css({
"background-image": "url(" + imgArr[count] + ")"
});
$("#myText").html(textArr[count]);
count++;
if (count == imgArr.length) {
count = 0;
}
}
// 設置動畫效果
function animateBanner() {
$("#myBanner").delay(2000).animate({
opacity: 0
}, 1000, function() {
loadImgText();
$(this).animate({
opacity: 1
}, 1000);
});
}
// 自動輪播
setInterval(function() {
animateBanner();
}, 4000);
// 初始加載
loadImgText();
});
</script>
</head>
<body>
<div id="myBanner" style="width: 500px; height: 300px; background-size: cover; position: relative;">
<div id="myText" style="position: absolute; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.5); color: #fff; padding: 10px;">
</div>
</div>
</body>
</html>以上代碼實現了一個簡易的jQuery Banner帶文字。首先，我們定義了兩個數組，分別用來存儲圖片和文字。然后，通過jQuery的方法來實現Banner的自動輪播和動畫效果。最后，我們在Banner下方加上文字，使得Banner更具有表達力和信息性。
下一篇圖標css怎么寫