javascript - 需要帮助平滑此 javascript 幻灯片中的过渡

Question

我有一个使用 script.aculo.us 实现的带有文本覆盖的幻灯片，它在技术上是可行的，但我需要比现在更平滑的过渡。

更新:下面的 JSFiddle 链接。希望这会给我一些回应？

我认为这是一个 CSS 问题。 “下一张”图像在应该的时候淡入，但它发生在正在淡出的图像下方，然后弹出到位。您可以通过缩小浏览器宽度来观察这种情况。由于最大高度和响应式布局，这会导致东西上下弹跳。我觉得图像需要 position:absolute 才能在正确的位置淡入，但我尝试添加的每一种方式都会导致整个幻灯片完全消失。

CSS

#slideshowContainer {
    position:relative;
    width:100%;
    max-height:400px;
    overflow:hidden;
}
/*.slideshow {
    position:relative;
    top:0px;
    width:100%;
} */  /*(this wasn't accomplishing anything, tried it with absolute also)*/
.slideshowImage {  /*relative = broken, absolute = invisible */
    left:0;
    top:0px;
}
.slideshowImage img { /*relative = broken, absolute = invisible */
    width:100%; 
}
.slideshowOverlay { /*this overlay works just fine, only the images are broken */
    position:absolute;
    width:100%;
    height:105px;
    bottom:0px;
    background: rgb(51, 51, 51); /* Fall-back for browsers that don't support rgba */
    background: rgba(51, 51, 51, .8);
}

这是js:

var i = 0;          
var image_slide = new Array('image-1','image-2','image-3'); //etc...
var NumOfImages = image_slide.length;
var wait = 6000;

function SwapImage(x,y) {       
    $(image_slide[x]).appear({ duration: 2 });
    $(image_slide[y]).fade({duration: 2});
}

function StartSlideShow() {
    play = setInterval('Play()',wait);  
}

function Play() {
    var imageShow, imageHide;

    imageShow = i+1;
    imageHide = i;

    if (imageShow == NumOfImages) {
        SwapImage(0,imageHide); 
        i = 0;                  
    } else {
        SwapImage(imageShow,imageHide);         
        i++;
    }
}

这是 div 的样子:

<div class="col span_3_of_3" id="slideshowContainer">
    <div id="image-1"  class="slideshow">
        <div class="slideshowImage"><img src="manage/photos/feature42.jpg"  /></div>
        <div class="slideshowOverlay">
            <div class="slideshowTitle">blah blah blah</div>
            <div class="slideshowSubTitle">blah blah blah blah blah blah</div>
            <div class="slideshowMore">...<a href="content.php?id=42">MORE</a></div>
        </div>
    </div>
    <div id="image-2"  style="display: none;"  class="slideshow">
        <div class="slideshowImage"><img src="manage/photos/feature41.jpg"  /></div>
        <div class="slideshowOverlay">
            <div class="slideshowTitle">blah blah blah</div>
            <div class="slideshowSubTitle">blah blah blah blah blah blah</div>
            <div class="slideshowMore">...<a href="content.php?id=41">MORE</a></div>
        </div>                
    </div>
</div>

等等。

奇怪的是div的overlay部分淡入淡出完美，只是图像有点奇怪。图像淡出为纯白色，然后下一张图像弹出得太快，除了最后一张图像，它由于某种原因向后工作。

我想要的是同步平滑的淡入淡出，没有突然弹出，中间没有空白。并且不会在较窄的响应尺寸中上下弹跳。

这是一个演示行为的 JSFiddle:JSFiddle缩小幻灯片窗口的宽度以查看实际情况。

如果您能帮助解决这个问题，我们将不胜感激。请记住，此页面上没有 jquery，不使用 jquery 的解决方案将是首选，因为我以前没有使用过它，而且时间有点短。

Answer 1

你的问题是你正在淡入一个 div 并同时淡出一个 div.. 但它们都是相对定位的(这意味着一个在 DOM 中第二个加载是将另一个向下推到 overflow:hidden;)

通过在幻灯片上使用 position:absolute; 并使它们成为容器的完整尺寸，它们可以有效地一个放在另一个之上

看这里http://jsfiddle.net/jb8Nx/7/

编辑:根据按比例缩放的建议，我使用了来自 http://fluidsquares.com/ 的人的一些 css 技巧。通过使用 padding-bottom 和 position:absolute 和 height:0。更新 fiddle http://jsfiddle.net/jb8Nx/10/ (请注意，当高度低于 400 像素时，图片比例为 12:5 :))