Frage von disselmanissel, 8

Wie kann ich meinen Slider mit einer wischanimation versehen?

Guten Tag, ich hab mal eine frag und zwar hab ich mir einen slide aus js und css gemacht und hab ihn auch automatisiert nun möchte ich aber, dass man eine animation hat die von dem einem bild über das andere geht. Also das eine wischanimation von dem einem bild ins andere bild geht, jetzt plopen die nur auf. Nun meine Frage, geht das noch mit meinem quelltext oder hab ich es schon vermasselt, weil ich eine "zählschleife" in js hab.

html: <!doctype html> Home

css: { margin:0px; } #slider { height:400px; width:650px; margin: 50px auto; position:relative; border-radius:4px; overflow:hidden;

}

image {

height:400px;
width:650px;
position:absolute;
clear: both;

}

.left_hold { height: 400px; width: 100px; position: absolute; top: 0px; left: 0px; } .right_hold { height: 400px; width: 100px; position: absolute; top: 0px; right: 0px; } .left { height:50px; width:50px; position:absolute; top:40%; left:20px; opacity:1; } .right { height:50px; width:50px; position:absolute; top:40%; right:20px; opacity:1; } .left_hold:hover .left { opacity:0.6; } .right_hold:hover .right { opacity:0.6; } .left:hover .left1

js: var imageCount = 1; var total = 3;

function photo(x) { var image = document.getElementById('image'); imageCount = imageCount + x; if(imageCount > total){imageCount = 1;} if(imageCount < 1){imageCount = total;} image.src = "Images/img"+ imageCount +".jpg"; clearInterval(time); // clear interval stops the set interval. time = window.setInterval(function photoA() { // givig the value of time the samfunction below starts the loop var image = document.getElementById('image'); imageCount = imageCount + 1; if(imageCount > total){imageCount = 1;} if(imageCount < 1){imageCount = total;} image.src = "Images/img"+ imageCount +".jpg"; },5000); }

var time = window.setInterval(function photoA() { // just addign the sunction to the variable so you can target it. var image = document.getElementById('image'); imageCount = imageCount + 1; if(imageCount > total){imageCount = 1;} if(imageCount < 1){imageCount = total;} image.src = "Images/img"+ imageCount +".jpg"; },8000);

Vielen dank, wenn mir einer helfen könnte, hab das css nicht selber geschrieben hatte dazu hilfe, die momentan nicht da ist

Antwort
von muelli21, 5

hab sowas schon mal gemacht, erinnere mich aber nur dunkel.

du machst das glaube ich mit fade-out und fade-in.

du sagst bei dem angezeigten bild dass es von rechts nach links outfaden soll, und leicht versetzt bzw zeitgleich sagst du bei dem nächsten bild dass es von r. nach l. einfaden soll.

sag mal bescheid ob das mit dem befehl klappt oder direkt ob das blödsinn war.

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten