Question

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

我想缩放图像以适应显示器（对于移动设备来说，方向更改处理也会很酷，但无论如何）我希望使用jquery或css来做到这一点但是无法集成它;任何帮助都将不胜感激。

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

我试图将这些jquery示例用于我的幻灯片放映，但我也无法得到它们（幻灯片只是重叠到其他div空间，或者在移动设备上创建水平滚动）：jsfiddle dot net / nottrobin / 9Pbdz /＆amp; stackoverflow / questions / 16140278 / jquery-image-resize-when-window-is-resized＆amp;另一个带有太阳（现在找不到它）也完美无缺...除了它没有使用我正在使用的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

希望这也有助于其他人。

在飞行中调整jquery循环幻灯片放映图像

1 个答案: