-1

フェージングイメージをトランジションイメージの上に重ねるにはどうすればよいですか? 私はJavasriptに慣れていないので、誰かがそれを助けることができれば、私のウェブサイトでこれを機能させる必要があります。これが私のコードです。

<center> <  <div id="main_over"></div> 
<div id="main_img"></div> 
<div id="himg" style="display:none; clear:both; margin-top:40px;"> 

        <img id="si_15" src="Images\MS1.jpg" /> 

        <img id="si_16" src="Images\MS2.jpg" /> 

        <img id="si_17" src="Images\MS3.jpg" /> 

        <img id="si_18" src="Images\MS4.jpg" /> 

</div> 
<style> 
#main_over{position:absolute; z-index:10; width:100; height:100; background:#000;          display:block;}
</style> 
<script type="text/javascript"         src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
var i = 0;
$('#himg img').each(function(){
    if(i == 0)
    {
        $('#main_over').html('<img src="' + $(this).attr('src') + '" alt="" />');

    }
    if(i == 1)
    {
        $('#main_img').html('<img src="' + $(this).attr('src') + '" alt="" />');
    }
    i ++;

    slide.arr.push($(this).attr('src')); 
});

setTimeout(function(){
    if(slide.arr.length < 2)
        slide.fade(0);
    else
        slide.fade(2);
}, 5000);
});

var slide = {
arr: Array(),
fade: function(i)
{
    $('#main_over').fadeOut("medium");
    setTimeout(function(){slide.next(i);}, 2000);
},
next: function(i)
{
    $('#main_over').html($('#main_img').html());
    $('#main_over').css('display', 'block');

    $('#main_img').html('<img src="' + slide.arr[i] + '" alt="" />');

    i++;
    if(i >= slide.arr.length)
        i = 0;

    setTimeout(function(){slide.fade(i);}, 5000);
}
}

``</script> /> </center>
4

1 に答える 1

0

画像の配置は JavaScript の問題ではなく、CSS の問題です。

画像のコンテナーを固定の幅/高さ (つまり、画像と同じ) にし、position:relative;

次に、すべての画像を position:absolute、top:0px、left:0px にします。これにより、それらすべてがページ上の同じ場所に配置されます。

次に、z-index を使用して相対的な深度を制御し、必要に応じて画像の不透明度を調整して、画像間のトランジションを生成できます。

...または、Web で数百ある無料のスライドショー ウィジェットの 1 つをダウンロードするだけです。

于 2013-11-13T18:57:13.733 に答える