在前端開發中，經常需要使用彈窗來展示信息或交互，而循環彈窗是其中一個比較常見的需求。下面介紹一個基于HTML的循環彈窗代碼。
<html>
<head>
<title>循環彈窗</title>
</head>
<body>
<button onclick="startLoop()">開始循環彈窗</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal()">×</span>
<p id="modalText"></p>
</div>
</div>
<script>
// 定義彈窗文本數組
var textArray = [
"循環彈窗 1",
"循環彈窗 2",
"循環彈窗 3",
"循環彈窗 4",
"循環彈窗 5"
];
var modal = document.getElementById("myModal");
var textIndex = 0;
// 開始循環彈窗
function startLoop() {
modal.style.display = "block";
setText();
setTimeout(closeModal, 3000);
}
// 關閉彈窗
function closeModal() {
modal.style.display = "none";
setTimeout(startLoop, 2000);
}
// 設置彈窗文本
function setText() {
var modalText = document.getElementById("modalText");
modalText.innerHTML = textArray[textIndex];
textIndex = (textIndex + 1) % textArray.length;
}
</script>
</body>
</html>以上代碼中，我們定義了一個基礎的HTML頁面，并使用JavaScript來實現循環彈窗的功能。我們使用了一個文本數組textArray來存儲彈窗顯示的文本內容，然后通過定義startLoop、closeModal和setText等函數來實現彈窗的循環顯示。
在startLoop函數中，我們首先展示彈窗，然后調用setText函數設置彈窗文本，設置一個定時器讓彈窗在3秒后自動關閉。在closeModal函數中，我們關閉彈窗，并設置一個定時器在2秒后重新開啟循環彈窗。setText函數中則實現了每次彈窗展示不同文本的功能。
以上就是一個基于HTML的循環彈窗代碼。通過HTML和JavaScript的結合，我們可以實現各種各樣的前端交互效果。