jQuery JFlow是一個基于jQuery的滑動幻燈片插件，它可以用于圖片、文字和其他HTML元素的滑動動畫展示。它可以通過無限循環來顯示多個幻燈片，并且具有自動輪播和導航箭頭等功能。
<!DOCTYPE html>
<html>
<head>
<title>JFlow Demo</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="jflow.js"></script>
<link rel="stylesheet" href="jflow.css">
</head>
<body>
<div id="jflow">
<div>
<img src="image1.jpg" alt="Image 1">
<p>This is a caption for Image 1</p>
</div>
<div>
<img src="image2.jpg" alt="Image 2">
<p>This is a caption for Image 2</p>
</div>
<div>
<img src="image3.jpg" alt="Image 3">
<p>This is a caption for Image 3</p>
</div>
</div>
<script>
$(document).ready(function() {
$('#jflow').jFlow({
slides: '#jflow div',
auto: true,
width: '800px',
height: '600px'
});
});
</script>
</body>
</html>在上面的示例代碼中，我們首先通過 <script> 標簽和 <link> 標簽加載了 jQuery、JFlow的 JavaScript和 CSS文件，然后創建了一個 id 為“jflow”的 <div> 元素，其中包含三個 <div> 元素，每個包含一張圖片和一個說明文字。最后在 JavaScript 代碼中，我們使用了 jQuery 的 ready() 方法來確保頁面加載完畢后再執行 JFlow 插件。然后，我們把幻燈片的相關參數傳遞給 jFlow() 方法，并將其綁定到 <div id="jflow"> 元素。這樣，我們就成功地在網頁上展示了一個美觀的幻燈片效果。
上一篇rpa vue