简单的幻灯片jQuery / UI图片内联 [英] Simple Slideshow jQuery/UI images inline

问题描述

为一个小项目建立了一个简单的幻灯片真的很快，但我不能得到的图像保持内联。
这是我的代码和一个小提琴：
HTML

built a simple slide show for a little project really fast, but I can't get the images to stay inline. Here's my code and a fiddle: 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/

你会注意到它工作，但当下一张图片滑过，它滑过当前图像下面，然后弹出到正确的位置。不知道我做错了什么。

as you'll notice it works, but when the next image slides over, it slides over underneath the current image, then pops up to the correct position after. Not sure what I'm doing wrong. Any help would be awesome.

推荐答案

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

Not sure if this is what you want, but adding:

position: absolute;

将解决您的问题。

是 JSFiddle 。

这篇关于简单的幻灯片jQuery / UI图片内联的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！