使用JavaScript实现简单的商城广告轮询
引言
当我们在商城网站上浏览时，经常会看到一些广告轮播，展示不同的产品或促销信息。在本文中，我将展示如何使用JavaScript实现一个简单的商城广告轮播。
以下是一个使用JavaScript实现商城轮询广告的完整项目示例代码：
HTML代码（index.html）：
<!DOCTYPE html>
<html>
<head>
<title>商城轮询广告</title>
<style>
.ad-container {
width: 500px;
height: 300px;
border: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: center;
}
.ad-image {
max-width: 100%;
max-height: 100%;
}
.ad-text {
font-size: 24px;
text-align: left;
}
</style>
</head>
<body>
<h1>商城轮询广告</h1>
<div class="ad-container">
<img class="ad-image" src="" alt="">
</div>
<div class="ad-text"></div>
<script src="app.js"></script>
</body>
</html>
JavaScript代码（app.js）：
// 广告数据
var ads = [
{
image: './image/ad1.png',
text: '特价商品！优惠大酬宾'
},
{
image: './image/ad2.png',
text: '独家限量版上市，限时抢购'
},
{
image: './image/ad3.png',
text: '打折活动开始啦，赶快来抢购'
}
];
// 获取页面元素
var adImage = document.querySelector('.ad-image');
var adText = document.querySelector('.ad-text');
// 初始化广告索引
var currentAdIndex = 0;
// 更新广告内容
function updateAd() {
// 获取当前广告
var currentAd = ads[currentAdIndex];
// 更新广告图片和文字
adImage.src = currentAd.image;
adText.textContent = currentAd.text;
// 增加广告索引
currentAdIndex++;
if (currentAdIndex >= ads.length) {
currentAdIndex = 0;
}
}
// 页面加载完成后开始轮询广告
window.onload = function () {
updateAd();
setInterval(updateAd, 5000); // 每5秒更新一次广告
};
注意：图片需要自己提供，我是建了一个image文件夹来存放相关图片。
具体效果：
每隔5秒切换下一张！
代码解释：
在上面的示例代码中，我们首先定义了一个包含广告数据的数组ads，每个广告对象都有一个image属性表示广告图片的路径，和一个text属性表示广告的文字内容。
然后，我们使用document.querySelector()方法获取页面中的广告图片和文字的元素，并将它们存储在变量adImage和adText中。
接下来，我们定义了一个updateAd()函数来更新广告内容。在这个函数中，我们根据当前广告索引从ads数组中获取当前广告对象，并将广告图片的路径和文字内容分别更新到页面元素中。然后，我们增加广告索引，以便在下一次更新广告时获取下一个广告。
最后，在页面加载完成后，我们调用updateAd()函数来初始化第一次广告，并使用setInterval()函数每5秒钟调用一次updateAd()函数来轮询更新广告。
可以将代码跑至自己本地看效果，广告图片和文字替换为自己的内容，也可以根据需要调整轮询的时间间隔，观察效果。
总结：JavaScript的使用是非常广泛的，本文只是简单的商城广告轮询示例，做的比较粗糙，简单看个效果，可以添加动画效果、更多广告对象或自定义样式，来丰富代码，完善效果。
本文含有隐藏内容，请 开通VIP 后查看