1

HTML（およびjQuery）を使い始めたばかりで、次の問題がわかりません。

ある種のフォトスライダーギャラリーを作ろうとしています。左側には、いくつかのカテゴリが重なり合っており、3 ～ 4 秒ごとに、一番上のカテゴリが右にスライドし (幅が広がり)、ドロップダウンします。ドロップダウンでは、特定のカテゴリの画像が開きます。ループを連続的にするには、2 つの div が必要で、互いに上にスライドします。次のコードを参照してください。

<html>
<head>

<title>Galerij</title>
<link rel="stylesheet" type="text/css" href="CSS/CSS_Galerij.css">
<script src="Javascripts/jquery-1.10.2.min.js"></script>

<script>
var But = new Array(
'#But1','#But2','#But3','#But4','#But5','#But6','#But7');
var But_Pos = new Array(
'0px','68px','136px','204px','272px','340px','408px');
var Images = new Array(
"Images/Stoel/Stoel_Alpha_1.jpg",
"Images/Gestoffeerde_Stoel/Gestoffeerde_Stoel_Kokonstoel_1.jpg",
"Images/Schommelstoel/Schommelstoel_Delta_1.jpg",
"Images/Tuinbank/Tuinbank_Beta_1.jpg",
"Images/Kast/Kast_Modulekast_1.jpg",
"Images/Salontafel/Salontafel_Klassiek_1.jpg",
"Images/Overig/Overig_Compartimentendoos_1.jpg");

var Num_But = 7;
var Track_Img = -1;
var Track_Large_Img = 0;
var speed = 1000;
var speed2 = 940;
$(document).ready(function(){

$('#imgl1').attr('src',Images[0]);
$(But[0]).animate({left:'233px',width:'475'},speed).animate({top:'612px'},speed,Set    _But_Array);
for (var i=1;i<7;i++) {
    $(But[i]).delay(speed).animate({top:But_Pos[i-1]},speed)
}
$('#divimg1').delay(speed).slideDown(speed);
Track_Large_Img++;


}); 

function Set_But_Array() {
    var temp = But[0];
    for (var i=1;i<Num_But;i++) {
        But[i-1]=But[i];
    }
    But[(Num_But-1)] = temp;    
    Loop();
}
function Loop() {
if (Track_Img == -1) {

    $('.img2').css('z-index','101');
    $('.img1').css('z-index','99');
    $('#imgl2').attr('src',Images[Track_Large_Img]);
    $('#divimg2').delay(4*speed).slideDown(speed2);
    $('#divimg1').delay(5*speed).slideUp(10);
}
else if (Track_Img == 1) {

    $('.img1').css('z-index','100');
    $('.img2').css('z-index','99');
    $('#imgl1').attr('src',Images[Track_Large_Img]);
    $('#divimg1').delay(4*speed).slideDown(speed2);
    $('#divimg2').delay(5*speed).slideUp(10);
}
$(But[0]).delay(3*speed).animate({left:'233px',width:'475'},speed).animate({top:'61    2px'},speed);
$(But[6]).delay(3*speed).animate({left:'0',width:'225'},speed).animate({top:But_Pos    [5]},speed,Set_But_Array);
for (var i=1;i<6;i++) {
    $(But[i]).delay(4*speed).animate({top:But_Pos[i-1]},speed)
}
Track_Img = (-1) * Track_Img;
Track_Large_Img++;
if (Track_Large_Img > (Num_But-1)) {
    Track_Large_Img = 0;
}
}

</script>


</head>

<body>

<div style="position:absolute;width:100%;height:100%">

<!--- Hoofd Logo --->
<div class="divhoofdlogo">
<a href="Main_Page.html"><img class="hoofdlogo" src="Images/Logo.png"></a>
</div>
<!--- Einde Hoofd Logo --->

<div style="position:absolute;width:723px;height:708px;top:25%;left:50%;margin-left:-361.5px;">
<div class="divbutton" id="But1" style="top:0px;"><a class="buttons" href="Stoelen.html?0,0">Stoelen</a></div>
<div class="divbutton" id="But2" style="top:68px;"><a class="buttons" href="Gestoffeerde_Stoelen.html?0,0">Gestoffeerde Stoelen</a></div>
<div class="divbutton" id="But3" style="top:136px;"><a class="buttons" href="Schommelstoelen.html?0,0">Schommelstoelen</a></div>
<div class="divbutton" id="But4" style="top:204px;"><a class="buttons" href="Tuinbanken.html?0,0">Tuinbanken</a></div>
<div class="divbutton" id="But5" style="top:273px;"><a class="buttons" href="Kasten.html?0,0">Kasten</a></div>
<div class="divbutton" id="But6" style="top:340px;"><a class="buttons" href="Salontafels.html?0,0"></a>Salontafels</div>
<div class="divbutton" id="But7" style="top:408px;"><a class="buttons" href="Overig.html?0,0">Overig</a></div>
<div class="img1" id="divimg1"><img class="img1" id="imgl1" src="Images/Salontafel/Salontafel_Combi_1.jpg"></div>
<div class="img2" id="divimg2"><img class="img2" id="imgl2" src="Images/Stoel/Stoel_Alpha_1.jpg"></div>

</div>


</div>
</body>
</html>

これはCSSです：

.divbutton {
position:absolute;
vertical-align:middle;
width:225px;
height:60px;
left:0px;
border:solid 2px #CCC;
text-align:center;
background-image:url(../Images/Wood.jpg);
font-family:Calibri;
font-size:24px;
font-weight:bold;
line-height:60px;
z-index:102;
}

.divhoofdlogo  {

  position:absolute;
  left:50%;
  margin-left:-259px;
  width:518px;
  height:140px;
}

img.hoofdlogo  {
  width:518px;
  height:140px;
}

a.buttons {
text-decoration:none;
color:#000;
}

#divimg1 {
position:absolute;
width:456,75px;
height:600px;
left:248.25px;
display:none;
z-index:100;
}

#divimg2 {
position:absolute;
width:456,75px;
height:600px;
left:248.25px;
display:none;
z-index:99;
}

#imgl1 {
width:456,75px;
height:600px;
}

#imgl2 {
width:456,75px;
height:600px;
}

最初のサイトでは動作します。ただし、画像がちらつくことがあり、そのときに表示されていた画像の上半分が消えて、別の div の画像 (次の画像で読み込まれる) が表示されることがあります。同時に発生しているさまざまなことが原因である可能性があることをどこかで読んだので、いくつかの遅延を含めようとしましたが、解決策を見つけることができませんでした. 誰かがこれで私を助けてくれることを願っています..

4

1 に答える 1

1

コードの問題を発見し、修正したと思います。それが実際に問題だった可能性があると思われる場合はお知らせください。答えは正しいです..

さまざまなアニメーションの時間を見ると、1 つのループに次の時間がかかることがわかります。

5*speed

アニメーションは、2 つの画像/2 つの div を互いに重ねてスライドします。ただし、何かを何度か下にスライドするには、その間に上にスライドする必要があります。div/image の z-index がその時点で表示されている div/image の z-index を下回っているときに、これを舞台裏で非常に迅速に行うことを考えました。したがって、1 つの画像が完全に下にスライドすると、その画像の後ろにあるもう 1 つの画像が非常に速くスライドして戻ります。ただし、これは次の後のものです。

5*speed

コード内:

$('#divimg1').delay(5*speed).slideUp(10);

だから、

slideUp(10);

一部は実際に新しいループで発生しています。そのループは、z インデックスを逆にすることから始まります。したがって、0.01 秒でスライドする画像を前面に配置します。そのため、画像の上半分だけがちらつくように見えます。それが問題だと思います。

解決策は非常に簡単だと思います..スライドアップの後までz-indexの変更を遅らせるだけです:

setTimeout(function() {
    $('.img2').css('z-index','101');
    $('.img1').css('z-index','99');
}, 150);

この解決策は機能しているようです: 3 ～ 4 ラウンドはちらつきませんでした! 私の質問に答えてくれてありがとう！

于 2013-08-28T23:40:42.323 に答える