-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 问题。

使图像的容器具有固定的宽度/高度（即与图像相同）和位置：相对；

然后使所有图像位置：绝对，顶部：0px，左侧：0px。这会将它们全部放置在页面上的相同位置。

然后，您可以使用 z-index 控制它们的相对深度，并根据需要调整图像的不透明度以生成图像之间的过渡。

...或者只是下载网络上数百个免费幻灯片小部件之一。

于 2013-11-13T18:57:13.733 回答