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

Simple Slideshow jQuery/UI images inline

提问by Stolve

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

非常快速地为一个小项目制作了一个简单的幻灯片，但我无法让图像保持内联。这是我的代码和小提琴：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:

CSS：

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

JS:

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();?

The Fiddle: http://jsfiddle.net/xYWzU/6/

小提琴：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.

您会注意到它有效，但是当下一张图像滑过时，它会滑过当前图像的下方，然后弹出到正确的位置。不知道我做错了什么。任何帮助都是极好的。

回答by kmoney12

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

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

position: absolute;

Will solve your problem.

会解决你的问题。

Here is the JSFiddle.

这是JSFiddle。

回答by adi

For future reference (or if you want to change your slideshow now), here's a great jQuery plugin called "Cycle" that's perfect for making slideshows!

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

It's easy to set up and you don't have to do so much CSS ;)

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