时间戳

首页 > 解决方案 > 在最后一张幻灯片之后单击屏幕右侧的第 1 个/在第 2 个幻灯片之后的第 1 个中单击屏幕左侧

jquery - 在最后一张幻灯片之后单击屏幕右侧的第 1 个/在第 2 个幻灯片之后的第 1 个中单击屏幕左侧

问题描述

当我点击屏幕右侧的当前幻灯片（第一张）时，从右向左滑动并显示第二张幻灯片和第三张、第四张、第五张幻灯片，但是在下一次点击（第五次）时，不显示第一张幻灯片并且有黑屏。另外，当我单击屏幕左侧的当前幻灯片（第一张）时，从左向右滑动并显示第五张幻灯片和第四张、第三张、第二张幻灯片，但在下一次点击（第五次）时，不显示第一张幻灯片是空白屏幕。幻灯片编号在点击屏幕左侧和右侧时效果很好。我在下面给出了html结构和jquery。任何人都可以改进它来解决这个问题。提前致谢。

HTML

<div class="home-slide">
    <div class="slide-wrapper">
        <div class="slide">slide 1</div>
        <div class="slide">slide 2</div>
        <div class="slide">slide 3</div>
        <div class="slide">slide 4</div>
        <div class="slide">slide 5</div>
    </div>
</div>
<div class="slide-number">
    <div class="active">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

CSS

.slide-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  color: #fff;
}
.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    min-height: 100%;
    padding: 100px 40px;
    clip: rect(0 1366px 660px 0);
    -webkit-transition: linear .5s;
    transition: linear .5s;
    cursor: pointer;
    border-right: 1px solid #000;
}
.slide:nth-child(1) {
    background-color: #F2358D;
    /*--magenta shade--*/
    z-index: 5;
}
.slide:nth-child(2) {
    background-color: #04D9B2;
    /*--cyne shade--*/
    z-index: 4;
}
.slide:nth-child(3) {
    background-color: #F2C53D;
    /*--yellow shade--*/
    z-index: 3;
}
.slide:nth-child(4) {
    background-color: #6a8aff;
    /*--blue shade--*/
    z-index: 2;
}
.slide:nth-child(5) {
    background-color: #3FFF42;
    /*--green shade--*/
    z-index: 1;
}
.slide-clip-left {
    clip: rect(0 1365px 660px 1365px);
}
.slide-clip-right{
    clip: rect(0 0 1365px 0);
}

.slide-number {
    display: flex;
    max-width: 100%;
    position: absolute;
    bottom: 0;
    left: 45%;
    transform-x: 50%;
    text-align: center;
    z-index: 999;
}

.slide-number div {
    padding: 20px 10px;
    opacity: .5;
}
.slide-number div.active {
    opacity: 1;
}

jQuery

var $numbers = $('.slide-number').children();
var $slides = $('.slide');
var numSlides = $slides.length;
var currentSlideL = 0;
var currentSlideR = 0;

$('.slide').click(function(e) {
    var pWidth = $(this).innerWidth(); //use .outerWidth() if you want borders
    var pOffset = $(this).offset(); 
    var x = e.pageX - pOffset.left;

    if(pWidth/2 > x){
        currentSlideL = (currentSlideL - 1) % numSlides;
        var $targetL = $slides.eq(currentSlideL);
        setTimeout(() => {
            $(this).addClass('slide-clip-left').animate({'z-index': 1 });
            $numbers.eq(currentSlideL).addClass('active').siblings().removeClass('active');
        }, 500);
        $target.removeClass('slide-clip-left').delay(200).animate({'z-index': 5 });
    }
    else if(pWidth/2 < x) {
        currentSlideR = (currentSlideR + 1) % numSlides;
        var $targetR = $slides.eq(currentSlideR);
        setTimeout(() => {
            $(this).addClass('slide-clip-right').animate({'z-index': 1 });
            $numbers.eq(currentSlideR).addClass('active').siblings().removeClass('active');
        }, 500);
        $target.removeClass('slide-clip-right').delay(200).animate({'z-index': 5 });
    }
});

当我单击屏幕右侧时，我希望滑块能够正常工作，应该显示第一张幻灯片，当单击屏幕左侧时，第二张幻灯片后会显示第一张幻灯片。

标签： jquery

解决方案

好的，我得到了解决方案，但我改变了方法。这里是新代码。我还为滑块添加了一些响应性。现在我检查左边距而不是 z-index 来为滑块容器设置动画，而不仅仅是 1 张幻灯片，所以我不必知道当前幻灯片是哪一张来找到下一张，我只关心是否margin 小于 0 并且大于.slidewidth 和.slider-wrapperwidth 的差值。这样，当您单击左侧时，我会在左侧边距中减去当前.slide宽度，并在单击右侧时添加它。看看resize_slider()功能。最后一件事，但不是为了相关性，放在.stop()前面.animate()可以防止动画重叠。PS 你可以使用相同的方法通过 CSS 变换制作动画

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>


        <style>
            body{ margin: 0; padding:0}
            .home-slide{
                overflow: hidden;
                width: 100%;
            }
            .slide-wrapper {
                display: flex;
                flex-direction: row;
                overflow: hidden;
                width: 100%;
                height: 80vh;
                color: #fff;
               
            }
            .slide {
                position: relative;
                height: 100%;
                min-height: 100%;
                padding: 100px 40px;
                
                -webkit-transition: linear .5s;
                transition: linear .5s;
                cursor: pointer;
                border: none;
                box-sizing: border-box;
                font-size: 20px
            }

            .slide:nth-child(1) {
                background-color: #F2358D;
                /*--magenta shade--*/

            }
            .slide:nth-child(2) {
                background-color: #04D9B2;
                /*--cyne shade--*/

            }
            .slide:nth-child(3) {
                background-color: #F2C53D;
                /*--yellow shade--*/

            }
            .slide:nth-child(4) {
                background-color: #6a8aff;
                /*--blue shade--*/

            }
            .slide:nth-child(5) {
                background-color: #3FFF42;
                /*--green shade--*/

            }

            .slide-number {
                display: flex;
                max-width: 100%;
                position: absolute;
                bottom: 0;
                left: 45%;
                transform-x: 50%;
                text-align: center;
                z-index: 999;
            }

            .slide-number div {
                padding: 20px 10px;
                opacity: .5;
            }
            .slide-number div.active {
                opacity: 1;
            }

        </style>
    </head>
    <body>
        <div class="home-slide">
            <div class="slide-wrapper">
                <div class="slide">slide 1</div>
                <div class="slide">slide 2</div>
                <div class="slide">slide 3</div>
                <div class="slide">slide 4</div>
                <div class="slide">slide 5</div>
            </div>
        </div>
        <div class="slide-number">
            <div class="active">1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
        
        <script>
            var $numbers,$slides,numSlides,isSliding,currSlide = 1;

            console.log('numSlides', numSlides)
            $(document).ready(function () {
                resizeSlides();

                $('.slide').click(function (e) {
                    var pWidth = $(this).outerWidth(); //use .outerWidth() if you want borders
                    var pOffset = $(this).offset();
                    var x = e.pageX - pOffset.left;
                    console.log($('.slide-wrapper').css('marginLeft'))
                    var posX = Math.floor(parseInt($('.slide-wrapper').css('marginLeft').replace('px')));
                    var sliderW = Math.floor($('.slide-wrapper').width())
                    var direction;
                    
                    if (pWidth / 2 > x) {
                        direction = 'left';

                    } else if (pWidth / 2 < x) {
                        direction = 'right';
                    }
                    
                    console.log('(pWidth - sliderW)',(pWidth - sliderW));
                    
                    console.log('posX', posX);
                    console.log('typeof posX', typeof posX);
                    console.log('pWidth', pWidth);
                    console.log('sliderW', sliderW);
                    console.log('(pWidth - sliderW)',(pWidth - sliderW));

                    if (!isSliding) {
                        isSliding = true;
                        if (direction == 'left' && posX < 0) {
                            $('.slide-wrapper').stop().animate({'marginLeft': '+=' + pWidth + 'px'}, 500, function () {
                                currSlide--;
                                $('.slide-number .active').removeClass('active')
                                $('.slide-number div:nth-child(' + (currSlide) + ')').addClass('active');
                                
isSliding = false;
                            });
                        } else if (direction == 'right' && (pWidth - sliderW) < posX) {
                            $('.slide-wrapper').stop().animate({'marginLeft': '-=' + pWidth + 'px'}, 500, function () {
                                currSlide++;
                                $('.slide-number .active').removeClass('active')
                                $('.slide-number div:nth-child(' + (currSlide) + ')').addClass('active');
                                 
isSliding = false;
                            });
                        }
                        setTimeout(function () {
                            isSliding = false;
                        }, 500)
                    }
                });

            })



            $(window).resize(function () {
                resizeSlides();
            });
            function  resizeSlides() {
                $numbers = $('.slide-number').children();
                $slides = $('.slide');
                numSlides = $slides.length;
                isSliding = false;
                currSlide = 1;
                var sliderW = Math.floor($('.home-slide').width());

                var numSlides = $('.slide-number').children().length;
                $('.slide').each(function () {
                    $(this).outerWidth(sliderW); 
                });
                $('.slide-wrapper').width(sliderW * numSlides);
            }
        </script>
    </body>
</html>

推荐阅读