jQuery幻灯片放映-为什么此代码有效? [英] jquery slide show - why does this code work?

问题描述

当我遇到一些正在做我几行代码正在做的事情的代码时，我正在使用jquery用javascript编写幻灯片显示.

I was in the middle of coding a slideshow in javascript using jquery, when I ran into something that was doing what my several lines of code was doing in a couple lines.

问题是，我不了解它的工作原理，所以我可以对其进行修改.

Problem is, I don't comprehend how it works so I can modify it.

var imgs = [
        'image1.jpg',
        'image2.jpg',
        'image3.jpg'];
        var cnt = imgs.length;

    $(function() {
        setInterval(Slider, 4000);
    });

    function Slider() {
    $('#imageSlide').fadeOut("slow", function() {
       $(this).attr('src', imgs[(imgs.length++) % cnt]).fadeIn("slow");
    });
    }

这是吸引我的那行:

[(imgs.length++) % cnt]

我正在读

3+1 % 3 = 1

现在，每次执行时，这些代码似乎都没有修改任何变量. cnt始终等于imgs.length(3)，imgs.length++实际上并没有修改它，它只是为一次执行添加了一个，对吗?

Now every time it executes, none of that code appears to be modifying any of the variables. cnt will always equal imgs.length (3), imgs.length++ doesn't actually modify it, it just adds one for that single execution, correct?

所以无论执行多少次，它总是imgs[1]，但是当我执行代码时，它可以在所有数组对象中正常运行.

So matter how many times it executes, it will always be imgs[1] yet when I execute the code, it runs properly through all the array objects.

我只是添加了alert(imgs.length);，并确认++确实确实更改了变量，但是对我来说仍然没有意义.

I simply added alert(imgs.length); and confirmed that ++ does actually change the variable, but it still doesn't make sense to me.

第一次运行，在++之后运行imgs.length = 4. 4 % 3 = 1，所以它应该运行数组对象[1]而不是[0]?

The first run, imgs.length = 4 after ++. 4 % 3 = 1 so it should run array object [1] not [0]?

第二次运行，5 % 3 = 2

第三次运行，6 % 3 = 0

等等等.但是永远不要重置.但是，如果我放置alert(imgs.length % cnt);，它只会返回0、1、2，而不是重置后的值.

etc etc.. but it shouldn't ever reset. However, if I put a alert(imgs.length % cnt); it only returns 0, 1, 2 than it resets.

为什么?

推荐答案

imgs.length++的返回值为3，因此3％3 = 0，但imgs.length将为4，并且imgs数组将包含4项.

the return value of imgs.length++ is 3 therefore 3 % 3 = 0 but imgs.length will be 4 and the imgs array will contain 4 items.

在控制台中尝试:

var x = [ 1, 2, 3 ]
x.length++
=> 3
x.length++
=> 4
x.length++
=> 5
x
[1, 2, 3, undefined, undefined, undefined]

因此，每次调用imgs.length++时，itt都会将一项附加到数组中.所以不是一个很好的代码，但很简短:)

so every time imgs.length++ is called itt will append one item to the array. so not a nice code but short :)

EDIT :为什么很容易回答，因为开始时它包含cnt个元素，因此代码将踩在每个图像上，并从图像的开头开始.因此，如果imgs数组包含5个项目，它将逐步遍历5个项目并从头开始.

EDIT: the why is easy to answer, in the start it contains cnt number of elements, so the code will step on every image and the starts from the beginning of it. so if the imgs array contains 5 items it will step through the 5 items and starts from the beginning.

此代码的唯一问题是，每次都会增加数组，浏览器会占用内存.

the only problem with this code, that the array will be increased every time and the memory will be eaten by the browser.

这篇关于jQuery幻灯片放映-为什么此代码有效?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！