简单的幻灯片 jQuery/UI 图像内联答案

【问题标题】：Simple Slideshow jQuery/UI images inline简单的幻灯片 jQuery/UI 图像内联
【发布时间】：2012-12-02 00:17:16
【问题描述】：

非常快地为一个小项目构建了一个简单的幻灯片，但我无法让图像保持内联。这是我的代码和小提琴： HTML

<div id="slides">
    <div class="slides_container">
        <img src="http://slidesjs.com/examples/standard/img/slide-1.jpg" width="960" height="392" alt="Slide 1" class="slide"  id="firstSlide">
        <img src="http://slidesjs.com/examples/standard/img/slide-2.jpg" width="960" height="392" alt="Slide 2" class="slide" style="display:none;">
        <img src="http://slidesjs.com/examples/standard/img/slide-3.jpg" width="960" height="392" alt="Slide 3" class="slide" style="display:none;">
        <img src="http://slidesjs.com/examples/standard/img/slide-4.jpg" width="960" height="392" alt="Slide 4" class="slide" style="display:none;">
        <img src="http://slidesjs.com/examples/standard/img/slide-5.jpg" width="960" height="392" alt="Slide 5" class="slide" style="display:none;">
        <img src="http://slidesjs.com/examples/standard/img/slide-6.jpg" width="960" height="392" alt="Slide 6" class="slide" style="display:none;">
    </div>
</div>

CSS：

.slide{
    width:960px;
    height:392px;
    display:inline;
    float:left;
}

JS：

function slideShow() {
    var displayToggled = false;
    var current1 = $('.slide:visible');
    var nextSlide = current1.next('.slide');
    var hideoptions = {
        "direction": "left",
        "mode": "hide"
    };
    var showoptions = {
        "direction": "right",
        "mode": "show"
    };
    if (current1.is(':last-child')) {
        current1.effect("slide", hideoptions, 1000);
        $("#firstSlide").effect("slide", showoptions, 1000);
    }
    else {
        current1.effect("slide", hideoptions, 1000);
        nextSlide.effect("slide", showoptions, 1000);
    }
};
setInterval(slideShow, 3000);
slideShow();

小提琴： http://jsfiddle.net/xYWzU/6/

您会注意到它可以工作，但是当下一张图片滑过时，它会滑过当前图片的下方，然后弹出到正确的位置。不知道我做错了什么。任何帮助都会很棒。

【问题讨论】：

嗨，欢迎来到 Stack Overflow。只是为了让您知道，这里不鼓励使用签名，所以如果您的签名被删除，请不要感到惊讶。

标签： javascript jquery html css jquery-ui

【解决方案1】：

不确定这是否是您想要的，但添加：

position: absolute;

会解决你的问题。

这里是JSFiddle.

【讨论】：

哦哇！我不敢相信事情就这么简单！
没问题 :) 9 分钟后见？哈哈
你甚至可以只保留这个并摆脱 .slide{...}

【解决方案2】：

为了将来参考（或者如果您现在想更改幻灯片），这里有一个很棒的 jQuery 插件，名为“Cycle”，非常适合制作幻灯片！

它很容易设置，您不必做太多 CSS ;)

【讨论】：