Ich denke, der beste Weg, dies zu demonstrieren, ist mit einem Beispiel. Wie Sie vielleicht aus diesem Beispiel ersehen können, ist das ersteDas Bild wird ausgeblendet, wenn das zweite eingeblendet wird, aber das zweite Bild drückt auch das erste Bild nach unten. Danach verschwindet das aktuell angezeigte Bild sofort, wenn das nächste Bild eingeblendet wird. Außerdem fordert StackOverflow Code mit jsfiddle-Links an. Hier ist also mein 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-->

und hier ist meine 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);
});

Ich möchte, dass die Bilder übereinander übergehenandere gleichmäßig, aber ich möchte das tun, ohne die Eigenschaften des CSS-Positionsstils des übergeordneten Div und seiner Bilder zu ändern. Der Grund, warum ich die Bilder nicht so formatieren möchte, dass sie die haben position:absolute Eigenschaft ist, weil es die Diashow von der Webseite trennt. Ich mag es nicht, die Diashow neu positionieren zu müssen jeden Mal ändere ich etwas auf meiner Webseite. Ich freue mich sehr über jede Hilfe, die Sie geben können, auch wenn Sie klarstellen können, dass das, worum ich bitte, unmöglich ist.

Antworten:

Fügen Sie einfach dieses CSS hinzu. Ich weiß, dass Sie die Positionierung nicht verwenden wollten, aber es führt kein Weg daran vorbei. Wenn Sie jedoch position: relative auf dem # slideshow div festlegen, werden die img-Elemente absolut relativ zum # slideshow-Container positioniert, was bedeutet, dass Sie das # verschieben können Diashow-Container überall und die img-Elemente werden folgen.

position: relative;

}

Diashow img {

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

}

Hier ist die modifizierte Geige: https://jsfiddle.net/75wczrw7/5/