0

我有一些图像：

<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
        });

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

4

2 回答 2

1

使用这个滑块......它完全响应且易于编辑:)

http://flexslider.woothemes.com/

于 2013-07-16T13:41:48.370 回答
0

Targetwindow的调整大小功能。

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 解决方案，因此您的服务器上的负载不会增加。:)

于 2013-07-16T13:47:41.523 回答