循环数组的逻辑怎么写

本文将介绍如何使用JavaScript实现Carousel插件,使得图片能够进行循环播放,包括正向和反向循环。通过两种不同的写法演示数据层面的处理逻辑,并探讨代码简洁性与清晰性的权衡。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

应用场景这样的:

var imgUrls = [
    '1.jpg',
    '2.jpg',
    '3.jpg',
    '4.jpg'
];

现在想做一个Carousel的插件,要求点击某个按钮的时候可以一直循环看图片:
1.jpg, 2,jpg, 3.jpg, 4.jpg,1.jpg,2.jpg....  如此循环下去,反之亦然。。

 怎么去做数据层面的处理,怎么判断是否到头了?容易想到的办法是:

var currentIndex = 0;
// show next img
if (currentIndex === imgUrls.length - 1) {
    currentIndex = 0;
}
else {
    currentIndex++;
}


// show previous img
if (currentIndex === 0) {
    currentIndex = imgUrls.length - 1;
}
else {
    currentIndex--;
}

 这种写法最直接,逻辑也很清楚,一目了然。不过今天自己在写这段的时候突然脑袋抽了一下,换了一种写法:

var currentIndex = 0;
// show next img
currentIndex = ++currentIndex % imgUrls.length;


// show previous img
currentIndex = (--currentIndex + imgUrls.length) % imgUrls.length;

 相比第一种写法,代码简洁了一些,但逻辑却不那么明显清晰了。

这让我想到了那个什么什么不可兼得。。。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值