单个dom节点实现轮播使用backgroundImage添加多张图片，位置偏移实现轮播效果创建一个div；并使用backgroundImage将图片附加到div中使用backgroundPosition调整位置使用css3transition调整transition代替简单的图片切换/***playimage*/functionplayImage(src){if(animaitionFinished)return;if(!_imageEl){_imageEl=document.createElement('div')_imageEl.className=`swiper_container`;_imageEl.style.backgroundImage=`url(${src.url})`;_imageEl.setAttribute("data-img",src.url);elContainer.appendChild(_imageEl);}else{animationFished=true;让宽度=elContainer.clientWidth，高度=elContainer。客户身高；让preImage=_imageEl.getAttribute("data-img");_imageEl.style.backgroundImage=`url(${preImage}),url(${src.url})`;_imageEl.style.backgroundPositionX=`center,${width+20}px`;setTimeout(()=>{_imageEl.style.transition="全部为0。8sease";_imageEl.style.backgroundPositionX=`-${width+20}px,center`;},0);setTimeout(()=>{_imageEl.style.transition="none";_imageEl.style.backgroundImage=`url(${src.url})`;_imageEl.style.backgroundPositionX=`center`;_imageEl.setAttribute("data-img",src.url)animaitionFinshed=false;},800)}}源代码
