JavaScript實現(xiàn)無縫輪播圖的示例代碼

第JavaScript實現(xiàn)無縫輪播圖的示例代碼src="/thid=OIP-C.kB-Ovasi0GW67-rmwnAcwAHaEow=316h=197c=8rs=1qlt=90o=6dpr=1.25pid=3.1rm=2"

/div

div

ahref=""

src="/thid=OIP-C.QPH1IBosDYBqaU3O6wV3YAHaEow=316h=197c=8rs=1qlt=90o=6dpr=1.25pid=3.1rm=2"/a

/div

div

ahref=""

src="/thid=OIP-C.P3NSGTdAYdyqy5zJpb5QXQHaEow=316h=197c=8rs=1qlt=90o=6dpr=1.25pid=3.1rm=2"

alt=""/a

/div

/div

divlt/div

divgt/div

div

span/span

span/span

span/span

/div

/div

/body

script

window.onload=function(){

constdoms={

carouselList:document.querySelector('.carousel-list'),

arrowLeft:document.querySelector('.carousel-arrow-left'),

arrowRight:document.querySelector('.carousel-arrow-right'),

indicator:document.querySelectorAll('.indicatorspan')

letcurrentIndex=0;

functionmoveTo(index){

doms.carouselList.style.transform=`translateX(-${index*100}%)`

doms.carouselList.style.transition='.5s'

//去掉導航點選中效果

letactive=document.querySelector('.indicatorspan.active')

active.classList.remove('active')

//添加選中效果

doms.indicator[index].classList.add('active')

currentIndex=index

//給導航點添加事件

doms.indicator.forEach((item,i)={

item.onclick=function(){

moveTo(i);

//復制第一張放最后，最后一張圖片放第一張之前

functioninit(){

letlastImg=doms.carouselList.lastElementChild.cloneNode(true)

letfirstImg=doms.carouselList.firstElementChild.cloneNode(true)

doms.carouselList.appendChild(firstImg)

doms.carouselList.insertBefore(lastImg,doms.carouselList.firstElementChild)

lastImg.style.position='absolute'

lastImg.style.transform='translateX(-100%)'

letindicatorLength=doms.indicator.length;

functionpreSlide(){

if(currentIndex===0){

doms.carouselList.style.transition='none'

doms.carouselList.style.transform=`translateX(-${indicatorLength*100}%)`

doms.carouselList.clientHeight

moveTo(indicatorLength-1)

}else{

moveTo(currentIndex-1)

functionnextSlide(){

if(currentIndex===doms.indicator.length-1){

doms.carouselList.style.transition='none'

doms.carouselList.style.transform='translateX(100%)'

doms.carouselList.clientHeight

moveTo(0)

}else{

moveTo(currentIndex+1)

doms.arrowLeft.onclick=function(){

preSlide();

doms.arrowRight.onclick=function(){

nextSlid