Question

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

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

有人可以就如何使用HTML，javascript和css创建第二张幻灯片提供建议吗？

Answer 1

好吧，部分关键是参数化所有必需的细节 - 也就是说，如果您决定使用单个图像并更改，请不要对输出容器的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>

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

1 个答案:

JS

CSS

HTML