廣告滾動是網站中常見的一種效果,可以讓多個廣告圖片或文字輪流展示。HTML可以通過一些簡單的代碼實現這一效果。
<div id="adArea">
<ul id="adList">
<li><img src="ad1.jpg" alt="廣告1"></li>
<li><img src="ad2.jpg" alt="廣告2"></li>
<li><img src="ad3.jpg" alt="廣告3"></li>
</ul>
</div>
<script>
var adArea = document.getElementById("adArea");
var adList = document.getElementById("adList");
var adItems = adList.getElementsByTagName("li");
var adWidth = adArea.offsetWidth; // 獲取廣告區域的寬度
var timer = null;
var index = 0; // 當前展示的廣告索引
function play() {
timer = setInterval(function() {
for (var i = 0; i< adItems.length; i++) {
adItems[i].style.left = "-" + index * adWidth + "px";
}
index++;
if (index >= adItems.length) {
index = 0;
}
}, 2000); // 2秒鐘切換一次
}
play(); // 開始播放輪播廣告
adArea.onmouseover = function() {
clearInterval(timer); // 鼠標懸停時停止自動輪播
}
adArea.onmouseout = function() {
play(); // 鼠標移開時恢復自動輪播
}
</script>
上述代碼中,廣告內容包含在一個id為“adList”的無序列表中,每一個廣告都是一個li標簽包含的img標簽。CSS樣式可以自行定義,這里不再贅述。
代碼中使用了JavaScript來實現廣告滾動。首先獲取廣告區域的寬度,然后定時器按照寬度將廣告輪流顯示出來。當輪播次數達到廣告數目時,自動歸位從頭開始輪播。鼠標懸停在廣告區域上時停止自動輪播,鼠標移開時恢復自動輪播。
這是一種簡單的廣告滾動代碼,可以根據實際需要進行調整和優化。同時也可以采用其他技術實現廣告滾動效果,比如利用jQuery插件實現。
上一篇boxjs.json使用
下一篇mysql輸入主機名