Question

我有一些图片：

<div id="slider" class="nivoSlider">
<img src="images/1.jpg" alt="" />
<img src="images/2.jpg" alt="" />
<img src="images/3.jpg" alt="" />
<img src="images/4.jpg" alt="" />
<img src="images/5.jpg" alt="" />
</div>

基本上它们的尺寸大约为600x450。我向他们应用了CSS。

.nivoSlider img
{
   height: 450px;
   width: 600px;
   margin-left: 25px;
}

我想制作幻灯片，然后我选择了nivoSlider插件。

$(document).ready(function () {
        $('#slider').nivoSlider({
            effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
            slices: 15, // For slice animations
            boxCols: 8, // For box animations
            boxRows: 4, // For box animations
            animSpeed: 300, // Slide transition speed
            pauseTime: 3000, // How long each slide will show
            startSlide: 0, // Set starting Slide (0 index)
            directionNav: true, // Next & Prev navigation
            controlNav: true, // 1,2,3... navigation
            controlNavThumbs: false, // Use thumbnails for Control Nav
            pauseOnHover: true, // Stop animation while hovering
            manualAdvance: false, // Force manual transitions
            prevText: '<<', // Prev directionNav text
            nextText: '>>', // Next directionNav text
            randomStart: false, // Start on a random slide
            beforeChange: function () { }, // Triggers before a slide transition
            afterChange: function () { }, // Triggers after a slide transition
            slideshowEnd: function () { }, // Triggers after all slides have been shown
            lastSlide: function () { }, // Triggers when last slide is shown
            afterLoad: function () { } // Triggers when slider has loaded
        });

我的问题是如何在浏览器宽度变化时动态更改大小？

Answer 1

使用此滑块...它完全响应且易于编辑：）

http://flexslider.woothemes.com/

Answer 2

定位window的调整大小功能。

window.onresize = function() {
    document.getElementByTagName('img').style.width -= "5px"; //decrease it every time
    document.getElementByTagName('img').style.height -= "5px"; //decrease it every time
}

详细了解onresize @ window.onresize : MDN。

作为旁注，我提供了一个纯JS解决方案，以便服务器上的负载不会增加。：）

调整图像大小？

2 个答案: