时间戳

首页 > 解决方案 > 禁用图像滑块Javascript中最后一张图像中的下一个按钮

javascript - 禁用图像滑块Javascript中最后一张图像中的下一个按钮

问题描述

我正在使用带有下一步按钮的 Java 脚本构建一个图像滑块以在图像之间切换。因此，当到达最后一张图像时，它会自动从第一张图像开始。我想禁用最后一张图片中的下一个按钮。或使用其他按钮（如提交或其他按钮）更改它

HTML：

<div class="slider">
        <!-- fade css -->
        <div class="myslide fade">
            <div class="txt">
                <h1>IMAGE 1</h1>
                <p>Web Devoloper<br>Subscribe To My Channel For More Videos</p>
            </div>
            <img src="img1.jpg" style="width: 100%; height: 100%;">
        </div>
        
        <div class="myslide fade">
            <div class="txt">
                <h1>IMAGE 2</h1>
                <p>Web Devoloper<br>Subscribe To My Channel For More Videos</p>
            </div>
            <img src="img2.jpg" style="width: 100%; height: 100%;">
        </div>
        
        <div class="myslide fade">
            <div class="txt">
                <h1>IMAGE 3</h1>
                <p>Web Devoloper<br>Subscribe To My Channel For More Videos</p>
            </div>
            <img src="img3.jpg" style="width: 100%; height: 100%;">
        </div>
        </div>
a class="next" onclick="plusSlides(1)">&#10095;</a>

JS：

const myslide = document.querySelectorAll('.myslide'),
      dot = document.querySelectorAll('.dot');
let counter = 1;
slidefun(counter);

let timer = setInterval(autoSlide, 8000);
function autoSlide() {
    counter += 1;
    slidefun(counter);
}
function plusSlides(n) {
    counter += n;
    slidefun(counter);
    resetTimer();
}
function currentSlide(n) {
    counter = n;
    slidefun(counter);
    resetTimer();
}
function resetTimer() {
    clearInterval(timer);
    timer = setInterval(autoSlide, 8000);
}

function slidefun(n) {
    
    let i;
    for(i = 0;i<myslide.length;i++){
        myslide[i].style.display = "none";
    }
    for(i = 0;i<dot.length;i++) {
        dot[i].className = dot[i].className.replace(' active', '');
    }
    if(n > myslide.length){
       counter = 1;
       }
    if(n < 1){
       counter = myslide.length;
       }
    myslide[counter - 1].style.display = "block";
    dot[counter - 1].className += " active";
}

提前致谢。

标签： javascriptdjango

解决方案

当你到达最后一张图像时，counter和myslide.length将是相等的。所以你可以试试这个

注意： a不支持disable，所以使用button

<button class="next" id="nextBtn" onclick="plusSlides(1)">&#10095;</button>

function slidefun(n) {
   
   // ... your existing logics

   const nextBtn = document.getElementById('nextBtn');

   if ( counter === myslide.length ) {
      nextBtn.disabled = true; 
   }
}

推荐阅读