1

目前，我有一个滑块，其中的图像在调整窗口大小时会重新调整大小。图像重新调整大小很好，但是当重新调整大小时，它会显示滑块容器的棕色背景。我希望能够使容器与图像一起重新调整大小，以便根本不显示棕色背景。

到目前为止，滑块的容器具有设定的高度。我设置了高度，因为没有高度，当幻灯片过渡时，容器会跳到高度 0 一秒钟，使布局有点小故障和移动。如果没有设置滑块容器的高度，事情会重新调整大小，但会出现布局故障。

我怎样才能没有布局故障和在不显示背景颜色的情况下重新调整大小的滑块容器？

这是可以找到滑块的站点的链接：http: //lab.stickywebz.com/plantsource/

这是我用于滑块的 javascript：

$(document).ready(function(){
ShowPostDiv(0);
});

function ShowPostDiv(divIndex)
{
$(".herocontent").hide();

if(divIndex >= $(".rotate_hide").length)
{
    divIndex = 0;
}

var divPostHtml = $(".rotate_hide:eq("+divIndex+")").html();
$(".herocontent").html(divPostHtml); 
$(".herocontent").fadeIn(1000).delay(6500).fadeOut(1000);

divIndex++;
setTimeout("ShowPostDiv("+divIndex+")", 8500);
}
$(document).ready(function(){
   ShowPost();
});

这是我用于滑块区域的一些 css：

#hero { width: 100%; position: relative; height: 450px; color: #fff; background-color: #bb9a71; overflow: hidden; }
.hero_img { width: 100%; }
.hero_img img { width: 100%; height: 100%; }
4

2 回答 2

0

像这样添加 id="hero_content" 

<div id="hero_content" class="herocontent" style="display: block;">

并像这样在每个图像标签（总共 4 个）中添加 id="image"

 <img id="image" width="1800" height="450" src="http://lab.stickywebz.com/plantsource/wp-content/uploads/2013/08/HeroSlide1-1800x450.jpg" class="attachment-hero wp-post-image" alt="HeroSlide1">

.

function ShowPostDiv(divIndex)
{

$(".herocontent").hide();  
if(divIndex >= $(".rotate_hide").length)
{
divIndex = 0;
}

var divPostHtml = $(".rotate_hide:eq("+divIndex+")").html();
$(".herocontent").html(divPostHtml);          
$(".herocontent").fadeIn(1000).delay(6500).fadeOut(1000);
var widthdiv=$("#hero_content").width();
var heightdiv=$("#hero_content").height();
var diff=widthdiv/heightdiv;

if(heightdiv>320&&diff<3)
{
heightdiv=widthdiv/3;
  if(heightdiv<320)
  {
  heightdiv=320;
  }
$('#hero').height(heightdiv);

widthdiv=widthdiv+'px';
heightdiv=heightdiv+'px';

$('#image').attr('style','width:'+widthdiv+'!important;height:'+heightdiv+'!Important');
 }
 divIndex++;
 setTimeout("ShowPostDiv("+divIndex+")", 8500); 
}

图像显示它已根据 div 重新调整大小..我提到 minheight=320 因为 minheight 低于 320 到 div 会导致 description() 隐藏..

在此处输入图像描述

于 2013-09-17T14:52:20.263 回答
0

我通过更改一些javascript解决了我的问题。滑块英雄区域的 CSS 如下：

.hero_img {width: 100%; }
.hero_img img { width: 100%; height: 100%; }

我修改了javascript如下：

$(document).ready(function(){
   ShowPostDiv(0);
});

function ShowPostDiv(divIndex)
{
//$(".herocontent").hide();

if(divIndex >= $(".rotate_hide").length)
{
    divIndex = 0;
}

var divPostHtml = $(".rotate_hide:eq("+divIndex+")").html();
$(".herocontent").html(divPostHtml); 
//$(".herocontent").fadeIn(1000).delay(6500).fadeOut(1000);
$(".herocontent").fadeTo(1000,1).delay(6500).fadeTo(1000,0.01);

divIndex++;
setTimeout("ShowPostDiv("+divIndex+")", 8500);
}
$(document).ready(function(){
   ShowPost();
});

css 修复了调整大小的问题，但布局仍然出现故障/跳跃，因为在幻灯片过渡期间，包含的 div 将为空，因此它的高度将变为 0px，而显示将不存在。导致容器清空的原因是在javascript中...... .hide() 和fadeOut() 将显示更改为无，导致布局跳转。所以我所做的是将.hide() 语句全部删除，而不是使用fadeIn() 和fadeOut()，而是使用fadeTo，而不是一直褪色到0，我褪色到0.01，它仍然看起来像完全淡出，但没有清空容器。

现在，我可以很好地调整容器大小和过渡。

于 2013-09-18T13:40:49.950 回答