0

我正在尝试以液体布局（父级）呈现图像滑块，我不喜欢限制图像的高度和尺寸，而大屏幕显示器（27 英寸）可以将它们请求到像 11 英寸甚至更小的显示器较少的。你能告诉我是否有插件可以帮助我解决这个问题吗？现在我正在使用一个具有固定布局的滑块（插件 - Nivo），我无法将其更改为液体这是我拥有的代码：HTML

 <!DOCTYPE HTML>
 <html>
 <head>
 <title>GALLERY</title>
 </head>
 <body>
 <div id="row_1">
 <div class="container"></div>
 </div>
 <div id="row_2">
 <div class="container">
 <div id="slideshow"> 
 <div id="slider"> 
 <img  src="img/1.jpg" title="" style="" /></div>      
 <img  src="img/2.jpg" title="" style="" /></div> 
 <img  src="img/3.jpg" title="" style="" /></div> 
 <img  src="img/4.jpg" title="" style="" /></div>      
 </div> 
 </div>  
 </div>
 </div>
 <div id="row_3">
 <div class="container"></div>
 </div>
 </body>
 </html>

CSS

 * {
    margin: 0;
    padding: 0;
    }
 html{
    height:100%;
    width: 100%;
   }
 body {
  background-color: #272321;
  height:100%;
  width: 100%; 
  }
 #row_1 {
  position:relative;
  height:15%;
  width: 100%;
 }
 #row_2{
   position:relative;
   height:77%;
   width: 100%;
  }
  #row_3{
   position:relative;
   height:8%;
   width: 100%;
   background-color: #151110; 
   }
  .container{
   position:relative;
   margin: 0 auto;
   height:100%;
   width: 80%;
  }

您认为我为不同的屏幕尺寸使用多种布局是否是个好主意？有没有办法用 Jquery 解决这个问题？

4

1 回答 1

0

我不知道预装插件，但你自己的代码并不多处理这个。

您可以将事件处理程序附加到窗口调整大小，检查容器 div 的大小并使用您自己的 javascript 根据新的容器大小为幻灯片选择新的图像大小。

使用轻微的延迟来防止代码在调整大小期间运行数百次，它可能如下所示：

(function() {
    var pauseTimer;

    $(window).resize(function() {
        // clear any previous timer running
        if (pauseTimer) {
            clearTimeout(pauseTimer);
        }
        // set new timer
        pauseTimer = setTimeout(function() {
            // user finished or paused resizing, 
            // so now we can recalculate slideshow size
            pauseTimer = null;
            // examine the size of your container div
            // select a new size image for your slideshow and load those images here
        }, 500);
    })
})();

这是一个演示：http: //jsfiddle.net/jfriend00/Tucf2/

于 2012-07-15T19:39:04.903 回答