Question

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

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

请参阅下面的代码以了解可能的解决方法。对于图片，我刚刚在paint上创建了一个650px乘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>

Answer 1

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

屏幕上调整边距动画的图像滑块调整大小（不使用滑块插件）

1 个答案: