请说明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