Question

我正在尝试制作幻灯片，但是当我调整屏幕大小时，我的图像就会缩小我怎么能让它响应..我想在javascript代码中做一些事情，我也试着获得容器的宽度并相应地调整图像大小但是它不起作用

<div class="container">
        <div class="row" style="width: 100%; margin-left: 0px;">
            <div id="slider">
                <ul class="slides">
                    <li>
                        <img class="slide img-responsive" src="Images/free1.jpg" /></li>
                    <li>
                        <img class="slide img-responsive" src="Images/free2.jpg" /></li>
                    <li>
                        <img class="slide img-responsive" src="Images/free3.jpg" /></li>
                    <li>
                        <img class="slide img-responsive" src="Images/free4.jpg" /></li>
                    <li>
                        <img class="slide img-responsive" src="Images/free5.jpg" /></li>
                    <li>
                        <img class="slide img-responsive" src="Images/free1.jpg" /></li>

                </ul>

            </div>


        </div>


    </div>

 $(document).ready(function () {
    var width = 1160;
    var animationSpeed = 2000;
    var pause = 1000;
    var currentSlide = 1;


    var $slider = $('#slider');
    var $slideContainer = $slider.find('.slides');
    var $slides = $slideContainer.find('.slide');
    var interval;
    /*
    function get_width(width) {
        if (window.matchMedia("(min-width: 450px)").matches) {
            width == 450;
        } else if (window.matchMedia("(min-width: 750px)").matches) {

            width == 700;

        } else {

            width == 1160;

        }

        return width;

    }*/
    function startSlider() {

        interval = setInterval(function () {

            $slideContainer.animate({ 'margin-left': '-=' + width  }, animationSpeed, function () {
                currentSlide++;
                if (currentSlide == $slides.length) {
                    currentSlide = 1;
                    $slideContainer.css('margin-left', 0);
                }


            });

        }, pause);
    }
    function stopSlider() {

        clearInterval(interval);
    }
    //listen for mouse enter and pause
    $slider.on('mouseenter', stopSlider).on('mouseleave', startSlider);




    startSlider();



});




#slider {
width:100%;
height:400px;
  overflow:hidden;



}
    #slider .slides {
    display:block;
    width:8000px;
    height:400px;
    margin:0;
    padding:0;   

    }
    #slider .slide {
    float:left;
    list-style-type:none;
   width:1160px;
   height:400px;    
    }

 li {
list-style-type:none;
}

Answer 1

您可以max-width: 100%;使用<img>。例如：

.slides img {
  max-width: 100%;
}

修改

如果要根据#slider宽度设置图像宽度，可以使用：

$('.slide').each(function() { $(this).width($('#slider').width()); });

如果要在调整窗口大小时重新设置图像，则可以处理窗口调整大小事件。例如：

$(window).resize(function() { $('.slide').each(function() { $(this).width($('#slider').width()); }); });

在调整大小时幻灯片放映图像

1 个答案: