Question

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

更新：JSFiddle链接如下。希望这能得到一些回应吗？

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

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的叠加部分完美地淡入和淡出，它只是奇怪的图像。图像淡出为纯白色，然后下一个图像弹出太快，除了最后一个图像，由于某种原因向后运行。

我想要的是同时平滑的淡入淡出，没有突然爆裂，中间没有空白。并且没有在较窄的响应大小中上下跳动。

这是一个演示行为的JSFiddle：JSFiddle缩小幻灯片放映窗口的宽度，看看到底发生了什么。

任何帮助平滑这一点的人都将不胜感激。请记住，这个页面上没有jquery，并且不使用jquery的解决方案会更受欢迎，因为我之前没有使用它，时间有点短。

Answer 1

你的问题是，你正在淡出div并同时淡出div ..但它们都是相对定位的（这意味着它们的位置相对于另一个DOM正在推动另一个低于overflow:hidden;）

在幻灯片上使用position:absolute;并将其设置为容器的完整尺寸，它们实际上是一个放在另一个上面

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

编辑：基于对比例缩放的建议，我使用padding-bottom和position:absolute以及height:0使用来自http://fluidsquares.com/的人的一点css技巧。更新小提琴http://jsfiddle.net/jb8Nx/10/（注意图像比例为12：5时低于400px高:) :)

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

1 个答案: