如何在同一网页上添加第二张幻灯片 [英] How to add a second slideshow on the same webpage

问题描述

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

I want my webpage to have two slideshows. I have one at the moment that works fine, but having trouble adding the second slideshow, as the images for the second slideshow appear outside of it.

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

I thought I could probably just copy and paste the code I did for the first slideshow and just change the div class names, but this did not work. I also have javascript controlling my slideshow but I didn't think copying the function I did for the first slideshow, would work for the second.

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

Can someone give me advice on how I can create the second slideshow using HTML, javascript and css?

推荐答案

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

Well, part of the key is to parameterize all of the required details - that is, don't hard-code things like the output container's id or that of the target image element if you decide to use a single image and change it's source.

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

1. Some approaches use an unordered-list and set it (with css) so only the first item is visible. Changing slides then becomes a matter of moving the li items around inside their container. I.e if one calls appendChild on the parent with the first li item as a parameter, it will be hidden since it's now the last li item and the 2nd item will now be the first and this will be the one displayed.

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

While the second approach is a little more straight forward, the 1st has the benefits of (0) not needing to know or care how many images there are - you simply move the first li item to be the last, or move the last one to be first and, (1) all the images are loaded at the start, so you don't get a small delay as each slide is shown for the first time and loaded.

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

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

I've utilized the second here. I've not bothered with prev/next buttons - this may mean this answer is beyond you at the moment. I would add prev/next functions inside the startSlideshow function and return the function itself - i.e return this;, rather than the id of the timer (which is to allow it to be stopped via clearInterval)

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

CSS

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

HTML

HTML

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

这篇关于如何在同一网页上添加第二张幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！