编程语言
首页 > 编程语言> > 请说明Javascript图片轮换代码

请说明Javascript图片轮换代码

作者:互联网

我正在使用以下代码创建基本的图像旋转功能,即&我想更好地了解它的工作方式.我得到了大部分,但是旋转函数中使用“严格”的那一行等于&三元运算符,即(i ===(imgs.length -1))? i = 0:i;)有点令人困惑.我知道它会增加计数器,但是在此之前它在做什么?

var i, imgs, pic;

function rotate()
{
    pic.src = imgs[i] ;
    (i === (imgs.length -1) ) ? i=0 : i++ ;
    setTimeout( rotate, 2500 );
}

function init()
{
    pic = document.getElementById("pic");

    imgs = [ 'images/shimano_offer.jpg', 'images/kids_bikes1.jpg', 'images/cycle_to_work.jpg' ] ;

    var preload= new Array();
    for( i=0; i< imgs.length; i++ )
    {
        preload[ i ] = new Image();
        preload[ i ].src = imgs[ i ];
    }

    i=0;

    rotate();
}

代码从http://ineasysteps.com/products-page/all_books/javascript-in-easy-steps-4th-edition/开始

解决方法:

线

(i === (imgs.length -1) ) ? i=0 : i++ ;

可以(并且应该)写为:

if (i === (imgs.length - 1)) {
    i = 0;
} else {
    i += 1;
}

是的,前者的字节数较少,但更难理解和调试.

编辑:Norguard指出了为此使用三元形式的有效方法.我使用三元数,但是在这种情况下,我不会这样做,因为在调试时,我可能希望在“ i = 0”条件下放置一个断点.如果您不期望需要断点,则他的方法更紧凑,更简洁,并且可能更可取.

标签:image-rotation,javascript
来源: https://codeday.me/bug/20191101/1980013.html