Question

原谅，非常非常非常新的Javascript。在uni上为项目添加幻灯片，运行真正基本的功能以使这些图像在幻灯片中显示，

但是在它完成之后它退出并且不会像我希望的那样重复或循环，此外，如果我想要一个淡入淡出的动画，那么它不仅仅是一个图像直接进入下一个最好的方式吗？

感谢。

<-- HTML -->
<img id="Slide" src="images/okc4.jpg" width=640 height=400 />

//javascript
<script type="text/javascript">
                    var slideimages = new Array() 
                        slideimages[0] = new Image()
                        slideimages[0].src = "image.jpg" 
                        slideimages[1] = new Image()
                        slideimages[1].src = "image.jpg"
                        slideimages[2] = new Image()
                        slideimages[2].src = "image.jpg"
                    var step = 0;

                    function slideit(){

                     document.getElementById("Slide").src = slideimages[step].src
                     if (step<=2) {
                      step++
                     }else{
                      step=0
                    }

                     setInterval("slideit()",2500)
                    }

                    slideit()
</script>

Answer 1

请看这个小提琴：http://jsfiddle.net/8mdLz8tw/1/

您的索引不再存在，将增长到3并且会出现错误，我也使用匿名函数使您的代码有所不同。在控制台中，您可以看到切换并重新启动，因为如果使用lorempixel，所有图片都是相同的：）

var slideimages = new Array()
slideimages[0] = new Image()
slideimages[0].src = "http://lorempixel.com/640/400/"//replaced pics for fiddle
slideimages[1] = new Image()
slideimages[1].src = "http://lorempixel.com/640/400/"
slideimages[2] = new Image()
slideimages[2].src = "http://lorempixel.com/640/400/"
var step = 0;

setInterval(function () {

    document.getElementById("Slide").src = slideimages[step].src;
    if (step < 2) {//Here was your mistake, if you increase when it is exactly 2 your step will go to three and thus throw an error since you don't have an image indexed with three
        step++;
        console.log(step);
        console.log("switched");
    } else {
        step = 0;
        console.log("restart");
    }


}, 2000);

Answer 2

尝试：

                    var slideimages = new Array() 
                        slideimages[0] = new Image()
                        slideimages[0].src = "image.jpg" 
                        slideimages[1] = new Image()
                        slideimages[1].src = "image.jpg"
                        slideimages[2] = new Image()
                        slideimages[2].src = "image.jpg"
                    var step = 0;

                    function slideit(){

                     document.getElementById("Slide").src = slideimages[step].src
                     if (step<2) {
                      step++
                     }else{
                      step=0
                    }

                    }

                    setInterval(function(){slideit();},2500)

setInterval足以让函数每2.5秒执行一次。

链接：https://jsfiddle.net/rafaelropota/7qr7qnsx/1/

Answer 3

要使它循环，就像你希望的那样，当步长达到比数组长度小1的大小时，你必须将它设置为0。

             var slideimages = new Array() 
                    slideimages[0] = new Image()
                    slideimages[0].src = "image.jpg" 
                    slideimages[1] = new Image()
                    slideimages[1].src = "image2.jpg"
                    slideimages[2] = new Image()
                    slideimages[2].src = "image3.jpg"
                var step = 0;

                function slideit(){

                 document.getElementById("Slide").src = slideimages[step].src
                 if (step < slideimages.length-1) {
                  step++
                 }else{
                  step=0
                }

                }

                setInterval(slideit,2500)

见小提琴： http://jsfiddle.net/bneb2bpw/2/

Answer 4

我认为其他答案已经涵盖了循环 - 但关于你对衰落过渡的看法......

我使用jQuery来创建这种效果。看一下jQuery的animate()，这是最常用的方法。

但是，有时我喜欢使用其他两种jQuery方法进行自己的转换 - fadeIn()和fadeOut()。

window.onload = function () {
    setInterval(function () {

        $("#Slide").fadeOut(2000, function () {

            $("#Slide").attr("src", slideimages[i].toString());
            $("#Slide").fadeIn();
        });
        i++;

        if (i >= 2) i = 0;

    }, 2500);
};

淡出图像元素，一旦淡出，就像以前一样改变它的来源。在消息来源发生变化之后，它会逐渐消失 - 进行淡入淡出过渡＆＃39;影响！工作示例 - here

Answer 5

我认为您不需要创建新的Image对象来更改src元素。也没有按预期使用setInterval（）。

<img id="Slide" src="images/okc4.jpg" width=640 height=400 />

//javascript
<script type="text/javascript">
                    var slideimages = ["image.jpg","image.jpg","image.jpg"];                            
                    var step = 0;

                    function slideit(){
                       document.getElementById("Slide").src = slideimages[step]
                       if (step<slideimages.length) {
                        step++
                       }else{
                        step=0
                       }

                     setInterval(slideit,2500)
                    }

                    slideit()
</script>

循环播放幻灯片和更改动画javascript

5 个答案: