如何改进这个 jQuery 滑块的功能？

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

我制作了一个图像滑块。

enter image description here

三个问题：

  1. 最后一张幻灯片正在显示。然而计数器正在显示第一张幻灯片。我该如何解决这个问题？

  2. 单击播放，播放计数器。如何让它停在最后一张幻灯片上？

  3. 单击最后一次，使 

    next
    和 
    last
    按钮变灰。另外，首先单击，使 
    prev
    和 
    first
    按钮变灰。我用的是CSS。我如何使用 jQuery 自动执行此操作？

我已经尝试过：

  1. 这里我尝试将 class .active 添加到最后一个图像并使用 css 隐藏其他图像。不幸的是计数器显示的是 1/6 而不是 6/6。

  2. 我尝试添加一个函数来检查当前幻灯片是否是最后一张幻灯片。我不知道为什么这不起作用：

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

var totalImages = $(".images").length; 
        sliderCompleted: function(current) {
        if (slideImage >= totalImages) {

        clearTimeout(slideTimer);

    };
  1. 我可能需要使用
    $('.images:last')
    但是我无法理解如何实现它。

我希望有人有时间滑动我朝正确的方向...

HTML CSS 和 jQuery：

$(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);

$('.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>

html jquery css
2个回答
0
投票

你只需要在 JS 代码的最后调用 

slideImage(1);
即可在你想要的地方开始工作。

$(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();
};

$('.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();
slideImage(1);

});
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>

-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();
};
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.