设置纵横比的响应幻灯片

我想创建一个简单的幻灯片与Jquery，但我弄乱了我的容器的高度属性。我需要高度为“自动”，因为我想在调整大小时保持宽高比稳定。这里是我的代码的一个例子，谢谢！设置纵横比的响应幻灯片

<!DOCTYPE html> 
<html lang="en-US" dir="ltr" 
    <head> 
     <meta charset="UTF-8"> 
     <title>test</title> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=3.4.1"></script> 
     <script type="text/javascript"> 
      var jq = jQuery.noConflict(); 
      var i = 0; 
      var slides = ["#slide_2", "#slide_1"]; 
      var imgSrc = new Array(2); 
      imgSrc[0] = "banner1.png" 
      imgSrc[1] = "banner2.png" 
      jq(document).ready(slideShow); 

      function slideShow(){ 
       slides.reverse(); 
       jq(slides[0]).attr("src", imgSrc[i]); 
       jq(slides[0]).fadeIn(1000); 
       jq(slides[1]).fadeOut(1000); 
       setTimeout("slideShow()", 5000); 
       i = (++i >= imgSrc.length)? 0: i; 
      } 
     </script> 
     <style type="text/css"> 
      .slide { 
       position:absolute; 
      } 
     </style> 
    </head> 
    <body style="background:#a9a9a9;"> 
     <headder id="branding" role="banner" style="display:block; background:#d0d0d0; width:100%; height:auto;"> 
      <h1>Example</h1> 
      <div id="slideshow"> 
       <img id="slide_1" class="slide" src="banner1.png"/> 
       <img id="slide_2" class="slide"/> 
      </div> <!-- #slideshow --> 
     </headder> 
     <div id="main"> 
      <p>Lorem ipsum eu usu assum liberavisse, ut munere praesent complectitur mea. Sit an option maiorum principes. Ne per probo magna idque, est veniam exerci appareat no. Sit at amet propriae intellegebat, natum iusto forensibus duo ut. Pro hinc aperiri fabulas ut, probo tractatos euripidis an vis, ignota oblique ut nec. Ad ius munere soluta deterruisset, quot veri id vim, te vel bonorum ornatus persequeris. Pro hinc aperiri fabulas ut, probo tractatos euripidis an vis, ignota oblique ut nec. Ad ius munere soluta deterruisset, quot veri id vim, te vel bonorum ornatus persequeris.</p> 
     </div> <!-- #main --> 
     <footer id="last" role="contentinfo" style="background:#3c3c3c;"> 
      <p style="color:#f9f8f0;">test site</p> 
     </footer> 
    </body> 
</html>

来源

2012-07-20 Psyclops

我可能会想念你在这里问的，但高度：汽车应该是你的“幻灯片”div的默认设置。这是你遇到的问题吗？ – 2012-07-20 17:57:04

感谢您的回复！在我的情况下，最后的工作是将我的所有图像封装在另一张空白JPG（700bytes）图像上，分辨率与我的幻灯片和位置相同：相对而言，它比JavaScript更快更轻，与窗口成比例，完全尊重文件的“流程”。

注意：要使用自定义维度创建一个空的jpg，您可以在标题中找到0xFFC0标记。它的第三和第四个字节是y维度，第5和第6个字节是x。

干杯;）

来源

2012-07-22 10:27:29 Psyclops

在这里你可以用你所有的图像有一个div或任何标签和一些固定的高度适用于该分区。这样就不会影响图像的纵横比

来源

2012-07-20 18:20:25

问题在于，当缩放窗口时，固定高度不是。看我的解决方案！ – Psyclops 2012-07-22 10:29:25

设置纵横比的响应幻灯片

回答

相关问题