循环数组的逻辑怎么写

应用场景这样的：

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;

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

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