动态调整jquery循环幻灯片图像的大小

Question

我在我的主页上使用了 jquery 循环插件（幻灯片），并使用了来自：http://malsup.com/jquery/cycle/basic.html 的稍微修改的代码

我想缩放图像以适应显示器（主要用于移动设备，方向更改处理也很酷，但无论如何）我希望使用 jquery 或 css 来执行此操作，但无法集成它;对此的任何帮助将不胜感激。

我已尝试将 slideResize 和 containerResize 更改为零和一的所有可能组合而没有太大变化，并且我已尝试使用 css 来尝试两者：“max-width:100%;height:auto;”还有：“宽度：100％！重要；高度：100％！重要；”以及两者的许多其他排列和组合；另外，我还尝试过 @media 查询来调整不同屏幕尺寸的大小，但它同样不适用于 firefox、移动 safari 或 android ICS 浏览器。一切要么不缩放，要么在某些设备上缩放，但除了短暂的随机时刻外不显示图片，或者保存图片的 div 失去所有高度并且图像漂浮在我的其他元素之上（绝对的风格；p）

我试图让这些 jquery 示例与我的幻灯片一起使用，但我也无法获得它们（幻灯片只是重叠到其他 div 空间，或在移动设备上创建水平滚动）：jsfiddle dot net/nottrobin/ 9Pbdz/ & stackoverflow /questions/16140278/jquery-image-resize-when-window-is-resized & 另一个有太阳的（现在找不到）也能完美运行......除了它不能用我正在使用的 jquery 循环插件代码...任何帮助表示赞赏。

这是 jquery 脚本的链接（我在我的服务器上复制并缩小了它）：

http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js

这是我的 jQuery 代码：

    $(document).ready(function() {

    $('.slideshow1').cycle({
        fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc... 
        delay: -4000 
    });
        $('.sls0').cycle({
        fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc... 
        delay: -4000 
    });
        $('.sls1').cycle({
        fx: 'turnDown', // choose your transition type, ex: fade, scrollUp, shuffle, etc..
        delay: -2000 
    });
            $('.sls2').cycle({
        fx: 'shuffle', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        easing: 'easeOutBack', 
        delay: -2000 
    });
            $('.sls3').cycle({
    fx:    'curtainX', 
    sync:  false, 
        delay: -2000 
    });
                $('.sls4').cycle({
    fx:     'scrollDown', 
    easing: 'easeOutBounce', 
    delay:  -2000  
    });


                $('.sls5').cycle({
    fx:     'toss,fadeZoom,fade,blindX,cover,scrollUp,scrollDown,shuffle,turnDown,turnRight,turnLeft,scrollLeft,scrollRight,scrollHorz', 
timeout:700,
slideResize:   1,
containerResize: 1,
delay:  -2000  
});
});

HTML代码：

     <div id="logo">

            <center><div id="cycle_slide" class="sls5" style="">


             <img src="./slides/ring1.jpg" alt="" title="" style="-moz-border-radius:20px;border-radius:20px;">

<img src="./slides/ring2.jpg" alt="" title="" style="-moz-border-radius:20px;border-radius:20px;"> 

<img src="./slides/amps1.jpg" alt="" title="" style="-moz-border-radius:20px;border-radius:20px;">


            <img src="./slides/guitars1.jpg" alt="" title="" style="-moz-border-radius:20px;border-radius:20px;">
                        <img src="./slides/hand1.jpg" alt="" title="" style="-moz-border-radius:20px;border-radius:20px;"> 


<img src="./slides/gold-bars.jpg" alt="" title="" style="-moz-border-radius:20px;border-radius:20px;"> 
        </div></center> 

      </div>
      <div id="contentarea">
           This is example content for testing etc....
      </div>

Answer 1

这是我第二次提出并回答我自己的问题。

我在尝试解决另一个问题时找到了一些解决方案（请继续关注那个问题！），我想我会分享我的发现。

所有这些滑块均已获得 MIT（或决斗 MIT L/GPL）许可，并且可适应显示尺寸（移动设备友好）：

swipejs.com

photoswipe.com

www.idangero.us/sliders/swiper/

sequencejs.com

希望这对其他人也有帮助。