html js轮播图无白链接,怎么用原生JS实现无缝轮播？（不在头尾加辅助图的情况下）...

不需要辅助图，但是需要至少有3张图

1张图 应该不需要滚动

2张图 复制成4张图就可以

Banner

.banner {position:relative;margin:0 40px;width:300px;height:200px;border-radius:10px;background:url('') center #F6F6F6;overflow:hidden;}

.banner .item {position:absolute;width:300px;height:200px;left:300px;background:center center/contain transparent;z-index:1;}

.banner .item.transition {

-webkit-transition: left 1s;

-moz-transition: left 1s;

-ms-transition: left 1s;

-o-transition: left 1s;

transition: left 1s;

}

.banner .item-off {left:-300px;z-index:2;}

.banner .item-active {left:0;z-index:4;}

document.addEventListener('DOMContentLoaded', function(){

(function(){

let delay = 2000;

let arrItem = Array.prototype.slice.call(document.querySelectorAll('.banner .item'));

let cntItem = arrItem.length;

let idx = 0;

function next()

{

let idxOff = idx - 1;

if(idxOff < 0)

idxOff = cntItem - 1;

arrItem[idxOff].classList.remove('item-off');

arrItem[idx].classList.remove('item-active');

arrItem[idx].classList.add('item-off');

idx ++;

if(idx >= cntItem)

idx = 0;

arrItem[idx].classList.add('item-active');

setTimeout(next, delay);

}

function init()

{

arrItem[idx].classList.add('item-active');

if(cntItem > 1)

{

setTimeout(next, delay);

}

}

init();

})();

});