jQuery如何从外部txt文件读取文本适配现有文本轮播滑块

架构老林

2026-10-2

解决方案

核心问题说明

你之前的方法失效是因为load()是异步请求方法，原本的轮播初始化逻辑在DOM加载完成后就立刻执行，此时外部txt的内容还没加载到页面里，JS获取不到<a>元素，自然无法正常运行轮播逻辑。你需要把轮播初始化放到load()的回调函数中，等外部内容加载完成后再执行。

第一步：准备外部txt文件

新建updates.txt，直接写入你原本放在#updates里的全部<a>标签内容即可，不需要额外加其他代码：

<a href="redirect-link1.html">Text 1</a>
<a href="redirect-link2.html">Text 2</a>
<a href="redirect-link3.html">Text 3</a>

后续要修改轮播内容只需要改这个txt文件就行，所有引用的页面都会同步更新。

第二步：简化HTML结构

原本的HTML里#updates不需要再写内置内容，留空即可：

<div id="updates"></div>

CSS代码不需要做任何修改，沿用你原来的即可。

第三步：修改JS逻辑

调整后的JS代码如下，核心是把轮播初始化放到load的回调里：

$(function () {
    var slider = $("#updates");
    // 加载外部txt文件，加载完成后再初始化轮播
    slider.load("../updates.txt", function() {
        // 内容加载完成后再获取a元素
        var items = slider.children('a'),
            length = items.length,
            i = 0,
            change = function () {
                items.eq(i).fadeOut(300, function () {
                    i += 1;
                    if (i === length) {
                        i = 0;
                    }
                    items.eq(i).fadeIn(300);
                });
            };
        items.not(':first').hide();
        setInterval(change, 5000);
    });
});