1

現在、ウィンドウのサイズが変更されるとサイズが変更される画像のスライダーがあります。画像のサイズは正常に変更されますが、サイズを小さく変更すると、スライダー コンテナーの茶色の背景が表示されます。茶色の背景がまったく表示されないように、画像とともにコンテナーのサイズを変更できるようにしたいと思います。

現在、スライダーのコンテナーには高さが設定されています。高さを設定しないと、スライドが遷移しているときにコンテナが 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 について言及しました。320 未満の minheight を div にすると、description() が非表示になるためです。

ここに画像の説明を入力

于 2013-09-17T14:52:20.263 に答える