如何在同一网页上添加第二张幻灯片答案

【问题标题】：How to add a second slideshow on the same webpage如何在同一网页上添加第二张幻灯片
【发布时间】：2016-11-21 05:08:25
【问题描述】：

我希望我的网页有两个幻灯片。我目前有一个工作正常，但无法添加第二个幻灯片，因为第二个幻灯片的图像出现在它之外。

我想我可能只是复制并粘贴我为第一个幻灯片放映所做的代码并更改 div 类名称，但这不起作用。我也有 javascript 控制我的幻灯片，但我不认为复制我为第一个幻灯片所做的功能，将适用于第二个。

谁能给我建议，告诉我如何使用 HTML、javascript 和 css 创建第二个幻灯片？

【问题讨论】：

请向我们展示您的代码，或将我们链接到您的网页。您可能需要为每个幻灯片使用唯一 ID。
这真的很难回答，你需要解释的远不止这些，并给我们你的示例代码，可能把它放在 Jsfiddle 或其他地方给我们展示一个演示，然后我们可以提供更多帮助。
您可能应该在此处粘贴完整代码或提供 jsfiddle 的链接
首先，您在幻灯片 3 中缺少结束 </b> 标记。
你什么时候调用function motion(n)，你为n传递了什么参数，你又是如何递归调用function motion(n)的？至少如果你包含它，即使没有完整的代码，其他人也可以重现你的问题，最好提供 CSS 以获取更好的示例

标签： javascript html css

【解决方案1】：

好吧，部分关键是参数化所有必需的细节 - 也就是说，如果您决定使用单个图像并更改，请不要硬编码输出容器的 id 或目标图像元素的 id它的来源。

某些方法使用无序列表并设置它（使用 css），因此只有第一项可见。然后更改幻灯片就变成了在其容器内移动li 项目的问题。即，如果一个人在父项上调用appendChild 并使用第一个li 项目作为参数，它将被隐藏，因为它现在是最后一个li 项目，第二个项目现在将是第一个项目，这将是显示的项目.

虽然第二种方法更直接一些，但第一种方法的好处是 (0) 不需要知道或关心有多少图像 - 您只需将第一个 li 项目移动到最后一个，或者将最后一个移到第一个，并且 (1) 所有图像都在开始时加载，因此您不会有一点延迟，因为每张幻灯片都是第一次显示并加载。

其他方法会更改图像元素的 src。

我在这里使用了第二个。我没有为上一个/下一个按钮而烦恼——这可能意味着这个答案目前超出了你的范围。我会在 startSlideshow 函数中添加 prev/next 函数并返回函数本身 - 即 return this;，而不是计时器的 id（这是为了允许它通过 clearInterval 停止）

JS

function newEl(tag){return document.createElement(tag)}
function byId(id){return document.getElementById(id)}

window.addEventListener('load', onDocLoaded, false);

function onDocLoaded(evt)
{
    var slideshow1TimerId = startSlideshow( ['uqrsGpO.jpg', 'vote-pedro.jpg'], 'slide1', 3000 );
    var slideshow2TimerId = startSlideshow( ['zS0lOud.jpg', 'tree.png', 's13.bmp'], 'slide2', 1000 );
}

function startSlideshow(imgNameArray, idOfContainer, msPerSlide)
{
    var container = byId(idOfContainer);
    var tgtImgElem = newEl('img');
    container.appendChild(tgtImgElem);

    var timerId = setInterval(setSlideImg, msPerSlide);
    var slideIndex = 0;
    var numSlides = imgNameArray.length;

    function setSlideImg()
    {
        tgtImgElem.src = imgNameArray[slideIndex];
        slideIndex++;
        if (slideIndex >= numSlides)
            slideIndex = 0;
    }
    return timerId;
}

CSS

#slide1 img, #slide2 img
{
    height: 128px;
}

HTML

<div id='slide1'></div>
<div id='slide2'></div>

【讨论】：