图像在幻灯片上向下跳跃

image jumping downwards on a slideshow

本文关键字：跳跃 幻灯片 图像      更新时间：2023-09-26

我有一个幻灯片显示的问题(这个问题几乎是相同的一个简单的jQuery幻灯片图像向下移动的分裂秒，但它不适合我)。问题是next()调用。我试图创建一个睡眠函数，但是我无法在那里调用它。

下面是我的代码: CSS: 

.slidePromo { 
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative; 
    width: 700px; 
    height: 300px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
    overflow: hidden;
}
.slideshow > div { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    overflow: auto;
}
HTML: 

<div id="slidePromo" class="slidePromo">
    <div><img src="./promos/banner.jpg"></div>
    <div><img src="./promos/next.jpg"></div>
    <div><img src="./promos/splash.jpg"></div>
</div>
JQuery 

function slider(id, fade, timer) {
    $("#" + id + " > div:gt(0)").hide();
    setInterval(function() { 
    $('#' + id + ' > div:first')
        .fadeOut(fade)
        .next()
        .fadeIn(fade)
        .end()
        .appendTo("#" + id);
    },  timer);
}

任何想法?

试试这个:

setInterval(function() { 
$('#slideshow > div:first')
.fadeOut(100,function(){
    $(this).next().fadeIn(1000).end().appendTo('#slideshow');
});
},  3000);

在淡出时使用回调函数，它会等到淡出完全消失后再添加另一个。

可能是因为在css中你有slideShow类，但你的包装有slidePromo类。这个css块甚至不适用于smith。更改类-不需要更改jquery就可以工作。

注:Jquery代码很糟糕。试试这个:

function slider(id, fade, timer) {
    var holder = $('#' + id);
    holder.find(" > div:gt(0)").hide();
    setInterval(function() { 
    holder.find(' > div:first')
        .fadeOut(fade)
        .next()
        .fadeIn(fade)
        .end()
        .appendTo(holder);
    },  timer);
}
相关文章：