jQuery滑块如何检测第一张幻灯片、最后一张幻灯片和更新计数器？

Question

我正在使用图像滑块。

成功实施：

自动播放。
播放/停止按钮。
下一张幻灯片。
上一张幻灯片。
滑动计数器。

我遇到的问题：

删除自动播放（不想要它-_-）。
始终从最后一张幻灯片开始滑块。
单击
```
first
```
显示第一张幻灯片。
单击
```
last
```
显示最后一张幻灯片。
单击“播放”以滑动所有图像，并在最后一张幻灯片上停止。
淡出最后一张幻灯片上的“下一张”和“最后一张”按钮。
淡出第一张幻灯片上的“上一张”和“第一张”按钮。

我尝试过的：

停止自动播放：这里我尝试过停止计时器、停止step = 1、停止slideImage(0)，但是这些都没有；工作。
始终在最后一张幻灯片上启动滑块：这里我尝试将类
```
.active
```
添加到最后一张图像并使用css隐藏其他图像。不幸的是计数器显示的是 1/6 而不是 6/6。
单击
```
first
```
显示第一张幻灯片：由Christin Babu在他的答案中解决
单击
```
last
```
显示最后一张幻灯片：由Christin Babu在他的答案中解决
单击播放以滑动所有图像，并在最后一张幻灯片上停止：我尝试添加一个功能来检查当前幻灯片是否是最后一张幻灯片。我不知道为什么这不起作用：

function lastSlide() {
        if ($('.image').last().hasClass('active')){
            clearTimeout(slideTimer);
        } else { 
            slideImage(0);
        };
    };

淡出最后一张幻灯片上的“下一张”和“最后一张”按钮：我不知道如何添加一个函数来检测滑块是否位于最后一张图像，然后将类
```
.nav-off
```
添加到“下一个”和“最后一个”按钮。
淡出最后一张幻灯片上的“上一张”和“第一个”按钮：我不知道如何添加一个函数来检测滑块是否位于第一个图像，然后将类
```
.nav-off
```
添加到“下一个”和“最后一个”按钮。

请有人滑动我朝正确的方向吗？

更新（2024 年 4 月 30 日）：

感谢 Christin Babu 的回答，“第一张”和“最后一张”按钮将滑块跳转到第一张图像和最后一张图像。

$('.nav-first').click(function() {
  slider($('.images:first').index('.images') - $('.images:visible').index('.images'));
  clearTimeout(slideTimer);
  $('.nav-stop').hide();
  $('.nav-play').show();
});

$('.nav-last').click(function() {
  slider($('.images:last').index('.images') - $('.images:visible').index('.images'));
  clearTimeout(slideTimer);
  $('.nav-stop').hide();
  $('.nav-play').show();
});

我可能承担了一个超出我技能水平的项目，但我希望有人有时间向我提供一些建议。

代码：（已更新）

$(document).ready(function() {
    
    // Slider

    var slideTimer;

    var slideImage = function(step) {

        if (step == undefined) step = 1;

        clearTimeout(slideTimer);

        var imageIndex = $('.image:visible').index('.image');
        
        if (step != 0) {
            $('.image').stop();
            $('.image:visible').hide();
        }
        imageIndex = imageIndex + step;
        if (imageIndex >= $('.image').length) {
            imageIndex = 0;
        } else if (imageIndex < 0) {
            imageIndex = $('.image').length - 1;
        }
        if (step != 0) {
            $('.image:eq(' + imageIndex + ')').stop().show();
        }
        if ($('.slider').length > 0) {
            slideTimer = setTimeout(slideImage, 2000);
        }
        now = imageIndex;
        updateCounter();
    };
    clearTimeout(slideTimer);

    function lastSlide() {
        if ($('.image').last().hasClass('active')){
            clearTimeout(slideTimer);
        } else { 
            slideImage(0);
        };
    };

    $('.nav-stop').click(function() {
        clearTimeout(slideTimer);
        $(this).hide();
        $('.nav-play').show();
        $('.nav-first').removeClass('nav-off');
        $('.nav-prev').removeClass('nav-off');
        $('.nav-next').removeClass('nav-off');
        $('.nav-last').removeClass('nav-off');
    });

    $('.nav-play').click(function() {
        slideImage(0);
        $(this).hide();
        $('.nav-stop').show();
        $('div.nav-wrap span').removeClass('nav-off');
    });

    $('.nav-prev').click(function() {
        slideImage(-1);
        clearTimeout(slideTimer);
        $('.nav-stop').hide();
        $('.nav-play').show();
        $('div.nav-wrap span').removeClass('nav-off');
    });

    $('.nav-next').click(function() {
        slideImage(1);
        clearTimeout(slideTimer);
        $('.nav-stop').hide();
        $('.nav-play').show();
        $('div.nav-wrap span').removeClass('nav-off');
        
        
    });

    $('.nav-first').click(function() {
       slideImage($('.image:first').index('.image') - $('.image:visible').index('.image'));
        clearTimeout(slideTimer);
        $('.nav-stop').hide();
        $('.nav-play').show();
        $('div.nav-wrap span').removeClass('nav-off');
        $('.nav-first').addClass('nav-off');
        $('.nav-prev').addClass('nav-off');
    });


    $('.nav-last').click(function() {
      slideImage($('.image:last').index('.image') - $('.image:visible').index('.image'));
        clearTimeout(slideTimer);
        $('.nav-stop').hide();
        $('.nav-play').show();
        $('div.nav-wrap span').removeClass('nav-off');
        $('.nav-next').addClass('nav-off');
        $('.nav-last').addClass('nav-off');
    });


    
    // Counter

    var now = 0;

    function updateCounter() {
        var slidesTotal = $('.image').length;
        $('.counter').text(now + 1 + '/' + slidesTotal);
    }
    updateCounter();

});

div.slider {
    position: relative;
    float: left;
    padding: 10px;
    border: 1px solid black;
    outline: none;
    margin: 0;
    box-sizing: border-box;
}

div.slider figure {
    position: relative;
    display: none;
    width: 300px;
    padding: 10px;
    border: 1px solid black;
    outline: none;
    margin: 0 0 10px 0;
    box-sizing: border-box;
}

div.slider figure.active {
    display: block;
}

div.slider figure img {
    position: relative;
    width: 100%;
    padding: 10px;
    border: 1px solid black;
    outline: none;
    margin: 0 0 10px 0;
    box-sizing: border-box;
}

div.slider figcaption {
    position: relative;
    padding: 10px;
    border: 1px solid black;
    outline: none;
    margin: 0;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 20px;
}

div.slider div.nav-wrap {
    position: relative;
    display: inline-block;
    width: 300px;
    padding: 10px;
    border: 1px solid black;
    outline: none;
    margin: 0;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 20px;
}

div.slider div.nav-wrap span {
    position: relative;
    float: left;
    width: 20%;
    height: 40px;
    padding: 10px;
    border: 1px solid black;
    outline: none;
    margin: 0;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    color: black;
    background-color: white;
}

div.slider div.nav-wrap span:hover:not(.counter) {
    cursor: pointer;
    border: 1px solid silver;
    color: silver;
    background-color: whitesmoke;
}

div.slider div.nav-wrap span.counter {
    width: 100%;
    margin: 10px 0 0 0;
}

div.slider div.nav-wrap span.nav-stop {
    display: none;
}

div.slider div.nav-wrap span.nav-off {
    cursor: default;
    border: 1px solid silver;
    color: silver;
    background-color: whitesmoke;
    pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="slider">
        <figure class="image">
            <img src="http://www.bookmov.es/book/test_A.svg">
            <figcaption>Test A</figcaption>
        </figure>
        <figure class="image">
            <img src="http://www.bookmov.es/book/test_B.svg">
            <figcaption>Test B</figcaption>
        </figure>
        <figure class="image">
            <img src="http://www.bookmov.es/book/test_C.svg">
            <figcaption>Test C</figcaption>
        </figure>
        <figure class="image">
            <img src="http://www.bookmov.es/book/test_D.svg">
            <figcaption>Test D</figcaption>
        </figure>
        <figure class="image">
            <img src="http://www.bookmov.es/book/test_E.svg">
            <figcaption>Test E</figcaption>
        </figure>
        <figure class="image active">
            <img src="http://www.bookmov.es/book/test_F.svg">
            <figcaption>Test F</figcaption>
        </figure>
        <div class="nav-wrap">
            <span class="nav-stop">stop</span>
            <span class="nav-play">play</span>
            <span class="nav-first">first</span>
            <span class="nav-prev">prev</span>
            <span class="nav-next">next</span>
            <span class="nav-last">last</span>
            <span class="counter"></span>
        </div>
    </div>

Answer 1

$('.nav-first').click(function() {
    slider($('.images:first').index('.images') - $('.images:visible').index('.images'));
    clearTimeout(slideTimer);
    $('.nav-stop').hide();
    $('.nav-play').show();
});


$('.nav-last').click(function() {
    slider($('.images:last').index('.images') - $('.images:visible').index('.images'));
    clearTimeout(slideTimer);
    $('.nav-stop').hide();
    $('.nav-play').show();
});

let slider = function(step) {
    if (step == undefined) step = 1;
    clearTimeout(slideTimer);
    let look = $('.images:visible').index('.images');
    if (step != 0) {
        $('.images').stop();
        $('.images:visible').hide();
    }
    look = look + step;
    if (look >= $('.images').length) {
        look = 0;
        if (step > 0) {
            clearTimeout(slideTimer);
            $('.nav-stop').hide();
            $('.nav-play').show();
            updateCounter();
            return;
        }
    } else if (look < 0) {
        look = $('.images').length - 1;
    }
    $('.images:eq(' + look + ')').stop().show();
    if ($('.slider').length > 0 && step != 0) {
        slideTimer = setTimeout(slider, 2000);
    }
    now = look;
    updateCounter();
};

jQuery滑块如何检测第一张幻灯片、最后一张幻灯片和更新计数器？

问题描述投票：0回答：1

1个回答

最新问题

jQuery滑块如何检测第一张幻灯片、最后一张幻灯片和更新计数器？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1