使用JavaScript实现简单的商城广告轮询

Miraritowa

已于 2023-09-19 16:36:27 修改

阅读量113

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-09-19 16:35:46 首次发布

本文链接：https://blog.csdn.net/qq_71388724/article/details/133034966

版权

本文展示了如何使用JavaScript在商城网站上创建一个简单的广告轮播功能，包括HTML结构、CSS样式和JavaScript逻辑，以及如何使用setInterval进行定时轮询。

摘要由CSDN通过智能技术生成

使用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秒切换下一张！

屏幕截图 2023-08-12 091621.png

屏幕截图 2023-08-12 091632.png

屏幕截图 2023-08-12 091642.png

代码解释：
在上面的示例代码中，我们首先定义了一个包含广告数据的数组ads，每个广告对象都有一个image属性表示广告图片的路径，和一个text属性表示广告的文字内容。

然后，我们使用document.querySelector()方法获取页面中的广告图片和文字的元素，并将它们存储在变量adImage和adText中。

接下来，我们定义了一个updateAd()函数来更新广告内容。在这个函数中，我们根据当前广告索引从ads数组中获取当前广告对象，并将广告图片的路径和文字内容分别更新到页面元素中。然后，我们增加广告索引，以便在下一次更新广告时获取下一个广告。

最后，在页面加载完成后，我们调用updateAd()函数来初始化第一次广告，并使用setInterval()函数每5秒钟调用一次updateAd()函数来轮询更新广告。

可以将代码跑至自己本地看效果，广告图片和文字替换为自己的内容，也可以根据需要调整轮询的时间间隔，观察效果。

总结：JavaScript的使用是非常广泛的，本文只是简单的商城广告轮询示例，做的比较粗糙，简单看个效果，可以添加动画效果、更多广告对象或自定义样式，来丰富代码，完善效果。

Miraritowa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用JavaScript实现简单的商城广告轮询

*总结：**JavaScript的使用是非常广泛的，本文只是简单的商城广告轮询示例，做的比较粗糙，简单看个效果，可以添加动画效果、更多广告对象或自定义样式，来丰富代码，完善效果。在本文中，我将展示如何使用JavaScript实现一个简单的商城广告轮播。数组中获取当前广告对象，并将广告图片的路径和文字内容分别更新到页面元素中。然后，我们增加广告索引，以便在下一次更新广告时获取下一个广告。可以将代码跑至自己本地看效果，广告图片和文字替换为自己的内容，也可以根据需要调整轮询的时间间隔，观察效果。
复制链接

扫一扫