1

我正在使用此代码。当它改变图像时，图像淡出，然后另一个图像淡入，同时我可以看到我不想看到的背景颜色。是否有任何简单的方法来淡化图像但同时淡入下一张图像，或者其他 jQuery 效果，如滑动图像？我只是不想看到背景颜色。

<script type="text/javascript">
$(document).ready(function(){
    var imgArr = new Array( // relative paths of images
        'css/images/main_img.jpg',
        'css/images/main_img_2.jpg',
        'css/images/main_img_3.jpg',
        'css/images/main_img_4.jpg',
        'css/images/main_img_5.jpg'
    );

    var preloadArr = new Array();
    var i;

    /* preload images */
    for(i = 0; i < imgArr.length; i++){
        preloadArr[i] = new Image();
        preloadArr[i].src = imgArr[i];
    }

    var currImg = 1;
    var intID = setInterval(changeImg, 6000);
    //added this so that the first image is always the first from the array
    $('#main_content').css('background','url(' + preloadArr[0].src +') top center no-repeat');
    /* Main IMG */
    function changeImg(){
        $('#main_content').animate({opacity: 0}, 1000, function(){
            $(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +') top center no-repeat');
        }).animate({opacity: 1}, 1000);
    }
});
</script>
4

3 回答 3

1

您无法仅使用一个元素来实现此效果。您需要在另一个元素之上再添加一个元素并将其淡入。一旦淡入，您可以隐藏后面的元素，但这甚至不是必需的。

请参阅此教程：http: //bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/

于 2012-09-21T18:02:52.027 回答
1

由于您正在更改 css 背景，因此您无法针对单个元素执行此操作。

您可以使用另一个 div 来实现这一点，该 div 将保存下一个背景图像（在您的内容淡出之前），并将使用非静态 css 位置状态和 z-index 属性放在您的#main_content 元素下。

于 2012-09-21T18:03:35.630 回答
0

在这里，我编写了使用 Jquery 创建简单的 JavaScript 淡化效果动画的代码，它可以帮助您创建很棒的图像动画。

首先添加以下脚本以导入 jquery.min.js 或者您可以自己托管此脚本。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

这里写CSS代码

.fade 和 .fade img

.fade 
{ 
box-shadow:1px 1px 5px 2px #6DC83C; 
position:relative; 
width:500px; 
height: 300px; 
border-radius:19px; 
} 

.fade img 
{ 
border-radius:19px; 
position:absolute; 
left:0;
top:0; 
}

并使用以下代码。

<script> $(function(){ $('.fade img:gt(0)').hide(); setInterval(function(){$('.fade    :first-child').fadeOut(3000).next('img').fadeIn(3000).end().appendTo('.fade');}, 4000); });    </script>

然后将以下代码用于图像。

<div class="fade"> 
<img src="image_1.gif"> 
<img src="image_2.gif"> 
<img src="image_3.gif"> 
</div>
于 2013-12-12T05:16:22.497 回答