图像滑块，屏幕大小调整时边距动画中断(不使用滑块插件）

image slider with margin animation breaking on screen resize (NO slider plugin used)

本文关键字：中断 插件 动画 屏幕 调整 图像      更新时间：2023-09-26

我正在尝试创建一个流畅的JQuery滑块，而不使用任何类型的滑块插件和媒体查询（只是CSS和jquery）。大多数解决方案涉及滑块插件和媒体查询。出于教育目的，我试图不这样做。

我正在使用边距动画来移动幻灯片（我不知道这是否是实现响应能力的最佳方法）。不幸的是，这是没有响应的，因为幻灯片宽度在 css 中是固定的。

请参阅下面的代码以获取可能的修复。 对于图片，我刚刚在油漆上创建了一个 650px x 350px 的矩形作为占位符。

<!DOCTYPE html>
<html>
    <head>
        <title>Slider</title>
        <style>
            *{
                margin: 0;padding: 0;
            }
            html{
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }
            *, *:before, *:after {
                -webkit-box-sizing: inherit;
                -moz-box-sizing: inherit;
                box-sizing: inherit;
            }
            .carousel{
                border: 2px solid #000;
                max-width: 650px;
                margin: 0 auto;
                overflow: hidden;
            }
            .carousel__canvas{
                width: 3900px;
            }
            .carousel__item{
                float: left;
                list-style-type: none; 
            }
            .carousel__item img{
                width: 100%
            }
        </style>
    </head>
    <body>
        <div class="carousel">
            <ul class="carousel__canvas">
                <li class="carousel__item"><img src="p1.png" alt="First Image"></li>
                <li class="carousel__item"><img src="p2.png" alt="Second Image"></li>
                <li class="carousel__item"><img src="p3.png" alt="Third Image"></li>
                <li class="carousel__item"><img src="p4.png" alt="Fourth Image"></li>
                <li class="carousel__item"><img src="p5.png" alt="Fifth Image"></li>
                <li class="carousel__item"><img src="p1.png" alt="First Image"></li>
            </ul>
        </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        var currentSlide = 1;
        var $carousel__item = $('.carousel__item');
        var numSlides = $carousel__item.length;
        var slideWidth = $carousel__item.width();
        var $viewport = $('.carousel');
        var $slideContainer = $viewport.find('.carousel__canvas');
        var $slide = $slideContainer.find('.carousel__item');
        var trasitionTime = 500;
        var slideViewTime = 3500;
        var interval;
        slideContainerWidth = slideWidth * numSlides;
        function startCarousel(){
            interval = setInterval(function(){
                if(numSlides>1){
                    $slideContainer.animate({'margin-left':'-='+slideWidth+'px'},     trasitionTime,function(){
                            if(++currentSlide === numSlides){
                                $slideContainer.animate({'margin-left':'0'},0);
                                currentSlide = 1;
                            }
                        });
                }
            },slideViewTime);
        }
        function stopCarousel(){
            clearInterval(interval);
        }
        $viewport.on('mouseover',stopCarousel).on('mouseleave', startCarousel);
        startCarousel();
    });
    </script>
</body>
</html>

为什么要使用静态宽度。您可以始终使用百分比和 css 中的"height：auto"来使其响应!!

相关文章：