如何使用HTML、CSS和JavaScript创建自动图片库幻灯片

How to create automatic image gallery slideshow by using HTML,CSS and JavaScript

本文关键字：创建 图片库 幻灯片 JavaScript 何使用 HTML CSS      更新时间：2023-09-26

这不起作用，有人能帮忙吗？

我正试图建立一个网站，其中的图像滑动到右边。我已经尝试了上一篇文章中的解决方案，但仍然没有奏效。

(function () {
    var imgLen = document.getElementById('imgGallary');
    var images = imgLen.getElementsByTagName('img');
    var counter = 1;
    if (counter <= images.length) {
        setInterval(function () {
            images[0].src = images[counter].src;
            console.log(images[counter].src);
            counter++;
            if (counter === images.length) {
                counter = 1;
            }
        }, 4000);
    }
})();
 .container{
            position:relative;
            width:600px;
            height:330px;
            border-radius:5px;
            border:4px solid black;
            overflow:hidden;
            margin-left:320px;
        }
#imgGallary > img
{ 
  width:700px;
  height:330px;
}
 <div id="imgGallary" class="container">
                <img src="image/lake-louise-51543_960_720.jpg" />
                <img src="image/snow-in-pine-tree-1265118__340.jpg" />
                <img src="image/winter-385640_960_720.jpg"/>
            </div>

这应该可以解决第一个图像无法正确输入的问题。保持HTML和CSS不变。更改JavaScript。这里我使用window.onload，但我认为您的自调用方法也可以。至于向右滑动，你设置东西的方式非常令人望而却步。我试着创建一个克隆并滑动克隆，但有些冲突使它不值得。

如果你想滑动图片，我实际上会走另一条路。与其更改src属性，为什么不使用绝对定位和z索引将图像堆叠在一起呢？然后，您可以去掉溢出属性，只需将边框应用于图像，或者更好地将这些图像设置为div背景图像（即background:url（'lake.jpg'）center center no repeat），这样您甚至不必担心调整它们的大小，它们也不会失真。在CSS中，给每个div一个"transform0.25s"的转换（或类似的转换）。然后，您可以在javascript中对它们应用转换，使它们向右滑动。要将它们恢复，只需去掉过渡值并为图像指定一个0的变换值，但要确保z索引低于当前显示的图像。如果您确实采用了转换路线，请记住添加-ms和-webkit前缀，以便旧浏览器可以访问：http://caniuse.com/#search=transform

不管怎样，这只是一个想法。以下是修复加载错误图像问题的代码。顺便说一句，我会考虑下次对复杂的css规则使用jQuery（如果你决定按照我的路线）。祝你好运

JS-

window.onload = function () {
    var imgLen = document.getElementById('imgGallary');
    var images = imgLen.getElementsByTagName('img');
    var counter = 1;
    //Store the src attributes in an array
    var src = [];
    for (var i = 0; i < images.length; i++) {   
        src[i] = images[i].src;
    }
    console.log(src);
    setInterval(function () {
        if (counter < images.length) {
            images[0].src = src[counter];
            console.log(src[counter]);
            counter++;

        }
        // Here we're saying if the counter is equal to the length of images, go back to the first images
        // and reset the counter.
        else {
            images[0].src = src[0];
            console.log(src[0]);
            counter = 1;
        }
        }, 4000);
}

一旦将新的src值分配给第一个图像标记，就无法返回该标记的原始src值。

您需要使用src属性制作一个空的img标记，以便将src值分配给该标记。

(function () {
    var imgLen = document.getElementById('imgGallary');
    var images = imgLen.getElementsByTagName('img');
    var counter = 1;
    if (counter <= images.length) {
        setInterval(function () {
            images[0].src = images[counter].src;
            console.log(images[counter].src);
            counter++;
            if (counter === images.length) {
                counter = 1;
            }
        }, 1000);
    }
})();
.container{
            position:relative;
            width:600px;
            height:330px;
            border-radius:5px;
            border:4px solid black;
            overflow:hidden;
            margin-left:320px;
        }
#imgGallary > img
{ 
  width:700px;
  height:330px;
}
<div id="imgGallary" class="container">
                <img />
                <img src="http://placehold.it/350?text=img1" />
                <img src="http://placehold.it/350?text=img2" />
                <img src="http://placehold.it/350?text=img3"/>
            </div>

相关文章：