简单的轮播图（js）

先来看一下效果图

点击左键图片当前图片向左移动，下一张图片移动到当前的位置。
具体实现如下：

var lunbo2 =[{img:"../image/slideshow-apartments-01.jpg",title:"One Bedroom Apartment"},{img:"../image/slideshow-apartments-02.jpg",title:"Hastings Studio Apartment"},{img:"../image/slideshow-apartments-03.jpg",title:"Two Bedroom Apartment"}]

插入轮播的图片

for(let i=0;i<lunbo2.length;i++){
    var lun2=`<img src="${lunbo2[i].img}" alt="" class="left lunImg2" >`
    box2.innerHTML=box2.innerHTML+lun2;
}

//轮播左移
function lunLeft2(){
   // console.log(page2)
    if(page2==lunbo2.length-1){
        laideshu2=0;
    }else{
        laideshu2=page2+1;
    }
    goNum2(laideshu2,"left");
}
//轮播右移
function lunRight2(){
    if(page2==0){
        laideshu2=lunbo2.length-1;
    }else{
        laideshu2=page2-1;
    }
    goNum2(laideshu2,"right");
}
// 轮播
function goNum2(dianjishu,fangxiang){
    if(fangxiang=="left"){
        lunImg2[page2].style.animation="leftOut .5s linear forwards";
        lunImg2[dianjishu].style.animation="leftGo .5s linear forwards";
        page2=dianjishu;
        name2.innerText=lunbo2[page2].title;
        name1.innerText=lunbo2[page2].title;
    }else if(fangxiang="right"){
        lunImg2[page2].style.animation="rightOut .5s linear forwards";
        lunImg2[dianjishu].style.animation="rightGo .5s linear forwards";
        page2=dianjishu;
        name2.innerText=lunbo2[page2].title;
        name1.innerText=lunbo2[page2].title;
    }
}