0

我目前有一个可在以下页面上运行的脚本：

http://universitycompare.com/

它运行良好并且可以满足我的要求，但是在每次转换之间我都有轻微的延迟，现在我想做的是让图像淡出现有图像的顶部，而不是淡出原始图像然后淡入.

我已经尝试过多次移动东西，但似乎无法解决这个问题！我知道这是一个快速的脚本，而且我在这里的脚本运行良好。所以希望有人帮我解决这个困扰我好几天的问题！

我错过了一些如此简单但看不到的东西。任何帮助将不胜感激。

<script type="text/javascript">
    $(document).ready(function () {

        var $backgroundimages = ['http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/ads/aru/front-page-ad.jpg', 'http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/ads/uniofbuckingham/front-page-ad.jpg', 'http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/ads/middlesex/front-page-ad.jpg', 'http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/home-page-slide.jpg', 'http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/TCE-New.jpg'];
        var $backgroundcount = 0;

        function fade($ele) {
            $ele.css('background-image', 'url('+$backgroundimages[$backgroundcount]+')');
            $backgroundcount++;
            $ele.fadeIn(1000).delay(4000).fadeOut(1000, function () {
                if ($backgroundcount >= $backgroundimages.length) {
                    $backgroundcount = 0;
                };
                fade($ele);
            });
        };

        fade($('#stretchParent  .HomeImage').first());
    });
</script>
4

1 回答 1

0

我想你想要 .fadeIn(1000).fadeOut(1000).delay(4000) 所以进/出淡入淡出同时发生。

此外，您将需要多个元素，以便同时显示两个图像。我会使用多个标签绝对相互叠加。然后通过它们旋转，淡入淡出，等等。

回声 cHao 的评论也 - 你需要预先缓存它们并希望优化它们 - 它们对我来说加载速度非常慢。

更新：这是一个工作示例：

http://jsfiddle.net/DhESu/

jQuery(function($){
    $('.rotator').each(function(){
        console.log('start rotation');
        imgs = $(this).find('img');
        idx = 0;
        rotate = null;
        rotate = function(){
            $(imgs[idx]).fadeOut();
            idx++;
            if (idx >= imgs.length) {
                idx = 0;
            }
            console.log('show idx ' + idx);
            $(imgs[idx]).fadeIn();
            setTimeout(rotate, 2000);
        }
        setTimeout(rotate, 2000);
    });
});

别客气。

于 2013-09-13T19:50:08.573 回答