时间戳

首页 > 解决方案 > 使用自动滑动创建图像滑块

javascript - 使用自动滑动创建图像滑块

问题描述

我正在尝试使用自动滑动创建图像滑块，但卡在自动滑动

这是我的 javasciprt 代码，我的下一个和上一个按钮工作正常，但难以实现自动化

  var myslider=document.querySelector(".image-silder")
    var myimages=document.querySelectorAll(".image-silder img")
    var prevbtn=document.getElementById("prev-btn")
    var nextbtn=document.getElementById("next-btn")
    var optionbtn=document.querySelectorAll(".option")
    console.log(optionbtn)
    var counter=1
    var size=myimages[counter].clientWidth
    myslider.style.transform='translateX('+(-size*counter)+'px)'

    nextbtn.addEventListener("click",function(){
        if(counter>=myimages.length-1)return;
        myslider.style.transition="transform 0.4s ease-in-out"
        counter++
        myslider.style.transform='translateX('+(-size*counter)+'px)'

    })

    prevbtn.addEventListener("click",function(){
        if(counter<=0)return;
        myslider.style.transition="transform 0.4s ease-in-out"
        counter--
        myslider.style.transform='translateX('+(-size*counter)+'px)'

    })
    myslider.addEventListener("transitionend",function(){
        myslider.style.transition="none"

       if(myimages[counter].id==="lastclone")
       {
           counter=myimages.length-2
           myslider.style.transform='translateX('+(-size*counter)+'px)'
       }
    })
    myslider.addEventListener("transitionend",function(){
        myslider.style.transition="none"
       if(myimages[counter].id==="firstclone")
       {
           counter=1
           myslider.style.transform='translateX('+(-size*counter)+'px)'
       }
    })
   optionbtn.forEach((a)=>a.addEventListener("click" ,function(){
   let i=this.getAttribute("option-index")
  counter=i
  myslider.style.transition="none"
  myslider.style.transform='translateX('+(-size*counter)+'px)'
   console.log(counter)
   }))

标签： javascriptcss

解决方案

您可以首先创建一个函数进入下一张幻灯片支持 DRY 的原理，然后在setTimeout 函数中使用它并设置要显示下一张幻灯片的间隔。假设你有一个名为 nextSlide 的函数，然后你可以做这样的事情......

setTimeout(nextSlide,1000);

推荐阅读