原生JavaScript基于JSON实现多商品轮播Slider的代码问题排查

核心错误梳理 #

数据源相关问题 #

• XMLHttpRequest是用于请求服务端接口的工具，你已经在本地定义了sourceData对象，不需要发起网络请求，原代码中request.open("GET", sourceData)属于语法错误，GET请求需要传入接口地址而非JS对象，直接删除所有XMLHttpRequest相关代码即可。
• 部分图片链接已自带https前缀，原代码硬拼接http:会导致链接失效，直接使用原链接即可。

轮播逻辑相关问题 #

• 原代码仅生成了1次商品DOM节点，轮播时只需要更新该节点的内容即可，不需要重复生成节点。
• 代码中存在未定义变量offersAd，document.article.src的DOM选取方式完全不符合规范。
• setTimeout(changeAd(), time)会立即执行changeAd函数，不会延迟触发，正确写法是传入函数引用setTimeout(changeAd, time)，定时轮播场景使用setInterval更合适。
• 重复绑定window.onload无意义，页面加载完成后直接执行初始化逻辑即可。
• CSS中.ads img的max-height: auto是无效属性，需设置固定高度避免图片撑破容器。

修正后可运行代码 #

JS代码 #

const section = document.querySelector('section');
// 直接使用本地定义的数据源
const sourceData = {"offers":[
{"name": "Porsche", "price": "99999999", "currency":"$", "imgURL": "https://porsche.pl/wp-content/uploads/2019/04/macan-porsche-polska.jpg"},
{"name": "Multipla", "price": "990", "currency":"$", "imgURL": "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Fiat_Multipla_front_20080825.jpg/1200px-Fiat_Multipla_front_20080825.jpg"},
{"name": "Boeing 747", "price": "990999999", "currency":"$", "imgURL": "https://media.istockphoto.com/photos/boing-747-taking-off-picture-id458711123"}
]};

// 提前创建可复用的DOM节点
const singleAd = document.createElement('article');
singleAd.className = "article";
const nameEl = document.createElement('p');
const priceEl = document.createElement('h2');
const imgEl = document.createElement('img')
const checkBtn = document.createElement('button');
checkBtn.className = "buttonCheck";
checkBtn.textContent = "Check"
// 组装节点结构
singleAd.appendChild(imgEl);
singleAd.appendChild(nameEl);
singleAd.appendChild(priceEl);
singleAd.appendChild(checkBtn);
section.appendChild(singleAd); 

const offers = sourceData.offers;
let currentIndex = 0;
const switchInterval = 3000;

// 渲染指定下标的商品内容
function renderAd(index) {
  const item = offers[index];
  imgEl.src = item.imgURL;
  priceEl.textContent = `${item.price} ${item.currency}`;
  nameEl.textContent = item.name;
}

// 轮播切换逻辑
function switchAd() {
  currentIndex = currentIndex < offers.length - 1 ? currentIndex + 1 : 0;
  renderAd(currentIndex);
}

// 初始化渲染第一个商品
renderAd(currentIndex);
// 定时触发切换
setInterval(switchAd, switchInterval);

CSS代码 #

.banner {
    width: 160px;
    height: 600px;
    border: 1px solid rgb(218, 218, 218);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-weight: 500;
    font-size: 0.7em;
}

#logo {
    padding-top: 30px;
    max-width: 140px;
}

.article {
    display: flex;
    flex-direction: column;
    height: 520px;
    width: 150px;
    justify-content: space-evenly;
    align-items: center;
    border: 1px solid rgb(216, 216, 216);
}

.ads img {
    max-height: 180px;
    width: 140px;
    object-fit: contain;
}

.buttonCheck {
    width: 100px;
    height: 35px;
    background-color: hsla(0, 100%, 64%, 0.932);
    border: none;
    color: white;
}

.ads p {
    padding-top: 50px;
}

HTML代码（无修改） #

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="banner.css">
    <title>Banner</title>
</head>
<body>
    <div class="banner">
        <section class="ads" name="slide">
        </section>    
    </div>
    
</body>
</html>

内容的提问来源于stack exchange，提问作者paciekFly