Question

大家好我修改了一些代码，我发现这些代码一旦悬停就会生成淡入淡出的图像，但它会导致幻灯片之间的这种白色强烈闪光看起来非常俗气。我用这张图片设置了一个黑色背景，但它似乎没什么区别。

在幻灯片之间实现平滑过渡的方法是什么？

这也是我使用过的最复杂的代码，如何在3秒内切换照片而不会被悬停事件触发？

setTimeout(function(){
    $('.photo-holder').hover(
        function () {
            $(this).stop().fadeOut("100", function () {
                $(this).css("background",      "url('http://tbc/images/ropes.jpg')").fadeIn(100);
            });
        }, 
        function () {
            $(this).stop().fadeOut("1000", function () {
                $(this).css("background",   "url('http://tbc/images/weights.jpg')").fadeIn(1000);
                700
            });
        }
    );
    700
});

Answer 1

这样的事情会沿着正确的方向发展吗？

// You may want to preload these images 
var photos = ['ropes.jpg', 'weights.jpg'];
var currentPhoto = 0;

function changePhoto() {
    $('.photo-holder').fadeOut(function() {
        $(this).css('background-image', 
                    "url('http://tbc/images/" + photos[currentPhoto] + "')");
        currentPhoto = (currentPhoto + 1) % photos.length;
    }).fadeIn();
}

setInterval(changePhoto, 3000);

淡入效果看起来太明亮和俗气，

1 个答案: