Javascript 一段时间后一个接一个地显示图像

我是前端开发的新手，我面临的一个主要问题是，我有3个图像放置在彼此上，现在我想移动一个图像，使另一个图像出现，然后它消失，第三个图像在一段时间后出现

我想在我的网站上的同一位置上的三个图像，但只想在一段时间后一个接一个地看到这三个图像。 请帮助我如何做到这一点

---

我可以使用字幕属性或javascript吗？

非jQuery选项

如果不想走jquery路线，可以试试。设置同样简单，您只需确保图像位于id为

slider

的div中，并且该div的尺寸与图像的尺寸相同

---

jQuery选项

将帮助您实现这一目标。它需要jquery才能工作，但创建简单的sliple幻灯片并不需要太多设置

请查看：

如果你想要更漂亮一点的东西，它就有了

arrayImageSource= ["Image1","Image2","Image3"];

setInterval(cycle, 2000);
var count = 0;

function cycle()
{
  image.src = arrayImageSource[count]
  count = (count === 2) ? 0 : count + 1;
}​

---

可能是这样的？

如果您希望获得良好的过渡和效果，我建议使用一个名为“jqFancyTransitions”的图像滑块。

这里是纯JavaScript解决方案：

编辑我添加了图像旋转。。。查看实时示例（下面的链接）

无功电流=0；
var旋转器_obj=零；
var images_array=新数组（）；
图像_数组[0]=“旋转器_1”；
图像_数组[1]=“旋转器_2”；
图像_数组[2]=“旋转器_3”；
var rotate_them=setInterval（函数（）{rotating（）}，4000）；
函数旋转（）{
rotator_obj=document.getElementById（images_array[current]）；
如果（当前！=0）{
var rotator_obj_pass=document.getElementById（images_数组[current-1]）；
rotator_obj_pass.style.left=“-320px”；
}
否则{
旋转器_obj.style.left=“-320px”；
}
var slideit=setInterval（函数（）{change_position（rotator_obj）}，30）；
电流++；
if（当前==images\u array.length+1）{
var rotator_obj_passed=document.getElementById（images_数组[current-2]）；
rotator_obj_passed.style.left=“-320px”；
电流=0；
旋转（）；
}
}
功能改变位置（旋转器对象，类型）{
var intleft=parseInt（rotator_obj.style.left）；
如果（intleft！=0）{
旋转器_obj.style.left=intleft+32+“px”；
}
else if（intleft==0）{
清除间隔（slideit）；
}
}
#外旋{
位置：绝对位置；
最高：50%；
左：50%；
宽度：320px；
高度：240px；
利润上限：-120px；
左边距：-160px；
溢出：隐藏；
}
#旋转外部img{
位置：绝对位置；
顶部：0px；
左：0px；
}

和一个工作示例：

window.onload=函数（）{
window.displayImgCount=0；
函数cycleImage（）{
如果（显示imgcount！==0）{
document.getElementById（“img”+displayImgCount）.style.display=“无”；
}
displayImgCount=displayImgCount==3？1:displayImgCount+1；
document.getElementById（“img”+displayImgCount）.style.display=“block”；
设置超时（cycleImage，1000）；
}
cycleImage（）；
}
​

---

Fiddle:

请不要建议使用整个库，除非要使用其中的单个操作。我认为对于初学者来说，这是实现OP所追求的最简单的方法。我可以给他一个纯javascript解决方案，但可能有点太多了。是的，但是，我认为OP最好学习javascript，而不是依赖libraryA或B。如果你看，有太多人“知道jQuery，但不知道javascript”@SReject大拇指赞成这个观点，对于像jQuery这样的初学者来说，库是向后退的…公平点-我已经扩展了一点，并添加了一个非jQuery选项。请不要建议使用整个库，除非要使用它的一个操作多一点。我认为OP最好是学习javascript，而不是依赖libraryA或B。如果你看，有太多人“知道jQuery但不懂javascript”，这就是为什么我说“良好的过渡和效果”。告诉我一个单一的操作是如何完成这样的工作的？他是一名前端开发人员。重要的是让网站更漂亮，而不仅仅是“完成工作”，我建议拥有所有3张图片并根据需要隐藏/显示。每次我添加纯JS解决方案时，更改源代码会导致浏览器要求使用新版本，稍后我会添加一些效果…我建议使用所有3个图像并根据需要隐藏/显示。更改源代码可能会导致浏览器再次请求图像，以确保其缓存版本是最新的。如果您是对的，这样我可以轻松制作过渡动画。我写得很快，我一定会修改它！不用担心，我已经在下面写了：我已经编辑了我的答案，现在它有了过渡动画，你可以在上面做更多的工作来添加一些其他效果，比如在循环中旋转图像等等。我希望我给了你一个从何处开始的线索…我添加了图像旋转循环，这样现在它就可以旋转到最后一刻：）

arrayImageSource= ["Image1","Image2","Image3"];

setInterval(cycle, 2000);
var count = 0;

function cycle()
{
  image.src = arrayImageSource[count]
  count = (count === 2) ? 0 : count + 1;
}​

<script>

    var current = 0;
    var rotator_obj = null;

    var images_array = new Array();
    images_array[0] = "rotator_1";
    images_array[1] = "rotator_2";
    images_array[2] = "rotator_3";

    var rotate_them = setInterval(function(){rotating()},4000);

    function rotating(){

        rotator_obj = document.getElementById(images_array[current]);

        if(current != 0) {

            var rotator_obj_pass = document.getElementById(images_array[current-1]);
            rotator_obj_pass.style.left = "-320px";

        }
        else {

            rotator_obj.style.left = "-320px";

        }

        var slideit = setInterval(function(){change_position(rotator_obj)},30);

        current++;

        if (current == images_array.length+1) {

            var rotator_obj_passed = document.getElementById(images_array[current-2]);
            rotator_obj_passed.style.left = "-320px";
            current = 0;
            rotating();

        }

    }

    function change_position(rotator_obj, type) {

        var intleft = parseInt(rotator_obj.style.left);

        if (intleft != 0) {

            rotator_obj.style.left = intleft + 32 + "px";

        }
        else if (intleft == 0) {

            clearInterval(slideit);

        }

    }


</script>

<style>

    #rotate_outer {

        position: absolute;
        top: 50%;
        left: 50%;
        width: 320px;
        height: 240px;
        margin-top: -120px;
        margin-left: -160px;
        overflow: hidden;

    }

    #rotate_outer img {

        position: absolute;
        top: 0px;
        left: 0px;

    }

</style>

<html>
<head>
</head>
<body onload="rotating();">

    <div id="rotate_outer">
        <img src="0.jpg" id="rotator_1"  style="left: -320px;" />
        <img src="1.jpg" id="rotator_2"  style="left: -320px;" />
        <img src="2.jpg" id="rotator_3"  style="left: -320px;" />
    </div>

</body>
</html>

<html>
<head>
<script type="text/javascript">
    window.onload = function(){
        window.displayImgCount = 0;
        function cycleImage(){
            if (displayImgCount !== 0) {
                document.getElementById("img" + displayImgCount).style.display = "none";
            }
            displayImgCount = displayImgCount === 3 ? 1 : displayImgCount + 1;
            document.getElementById("img" + displayImgCount).style.display = "block";
            setTimeout(cycleImage, 1000);
        }
        cycleImage();
    }
</script>
</head>
<body>
    <img id="img1" src="./img1.png" style="display: none">
    <img id="img2" src="./img2.png" style="display: none">
    <img id="img3" src="./img3.png" style="display: none">
</body>
</html>​