Myślę, że najlepszym sposobem na zademonstrowanie tego jest użycie Przykład jsfiddle. Jak można zauważyć w tym przykładzie, pierwszyobraz zanika, gdy drugi znika, ale drugi obraz przesuwa pierwszy obraz w dół. Następnie obraz, który jest aktualnie wyświetlany, natychmiast zniknie, gdy następny obraz zacznie zanikać. Ponadto StackOverflow wymaga kodu z linkami jsfiddle, więc oto mój HTML:

<div id="slideshow">
<img width="400px" src="/images/https://consumermediallc.files.wordpress.com/2014/11/totinos-stock-08-2014.jpg" alt="" />
<img src="/images/https://36.media.tumblr.com/66fa7962b68e90da541078fcc9efdc25/tumblr_inline_nnby3oQs8s1si7eaa_500.jpg" alt="Lightning Ghost" />
<img src="/images/http://ak-hdl.buzzfed.com/static/2014-05/enhanced/webdr02/14/7/enhanced-3829-1400068353-2.jpg" alt="Girraffe-dog" />
<img src="/images/https://www.colourbox.com/preview/2291250-terrible-grimace-men-with-shovel.jpg" alt="Purpleish Kitty" />
</div><!--slideshow-->

a oto mój JQuery:

$(function () {
//make the div take up the space given
$("div#slideshow").width("100%");
//make each slide fits within that div easily
$("div#slideshow > img").width("60%");
//hide the first image
$("#slideshow img:gt(0)").hide();
setInterval(function () {
//put each slide up for six seconds and cause it to fade out while the
//new one fades in over a period of two seconds
$("#slideshow :first-child").fadeTo(2000, 0)
.next("img").fadeTo(2000, 1).end().appendTo("#slideshow");
}, 6000);
});

Chcę, aby obrazy przechodziły nad każdą z nichinne równomiernie, ale chcę to zrobić bez modyfikowania właściwości stylu pozycji CSS nadrzędnego div i jego obrazów. Powód, dla którego nie lubię formatować obrazów, aby mieć position:absolute właściwość jest dlatego, że oddziela pokaz slajdów od strony internetowej. Nie lubię zmieniać położenia pokazu slajdów każdy czas zmieniam coś na mojej stronie. Bardzo doceniam każdą pomoc, jaką możesz udzielić, nawet jeśli możesz wyjaśnić, że to, o co proszę, jest niemożliwe.

Odpowiedzi:

Po prostu dodaj ten CSS. Wiem, że nie chciałeś używać pozycjonowania, ale nie ma sposobu na jego obejście. Jednak ustawiając pozycję: względne w #slideshow div elementy img są pozycjonowane bezwzględnie względem kontenera #slideshow, co oznacza, że ​​możesz przenieść # kontener pokazu slajdów w dowolnym miejscu, a elementy img zostaną wyświetlone.

position: relative;

}

pokaz slajdów img {

position: absolute;
top:0;
left:0;

}

Oto zmodyfikowane skrzypce: https://jsfiddle.net/75wczrw7/5/