nicht angemeldet
Danke für die sehr ausführliche Antwort.
Ich habe nochmal versucht die Navigation in body mit einzubinden jedoch wird es nicht erkannt. Mir fehlt ja eigentlich auch nur die richtige Positionierung der ganzen Slideshow, denn ansonsten funktioniert sie ja schon....
Sie läuft automatisch und wenn man die Buttons findet (:-)) kann man auch draufdrücken.
<div class="column">
<ul class="slideshow">
<li class="image"><img src="..\home\img\sonne2.jpg" width="1280" height="853" alt="sunset" class="center" /></li>
<li class="image"><img src="..\home\img\sonne1.jpg\" width="1280" height= "853" alt="secondsunset" class="center" /></li>
<li class="image"><img src="..\home\img\tik1.jpg\" width="1280" height= "853" alt="us" class="center"/></li>
<li class="image"><img src="..\home\img\tik2.jpg\" width="1280" height= "853" alt="us again" class="center"/></li>
</ul>
</div>
Hier ist jetzt kein Fehler mehr, ich habe es so gemacht wie beschrieben. Jedoch da ich ul geschlossen habe wird die slideshow nicht mehr angezeigt. :(
Dafür habe ich jetzt in meinem Editor von den 30 Ursprungswarnungen nur noch 20. :)
Hier nochmal die neueste Version, auch mit allen anderen Änderungen:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AaA Couplesite</title>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( document ).ready(function() {
console.log( "document loaded" );
});
$( window ).on( "load", function() {
console.log( "window loaded" );
});
</script>
<style>
h1 { font-size: 5.5em; background-color: DeepSkyBlue; text-align: center; }
h2 {text-align: center;}
p { font-size: 2.5em; text-align: center; }
ul { font-size: 2em; }
li.hm2 {
/* Textfluss ändern */
float: left;
/* Aufzählungspunkte entfernen */
list-style-type: none;
/* Abstand */
margin-right: 15px;
}
ul {
text-align: left;
width: 70%;
position:relative;
left: 0%;
}
.center {
display: block;
margin-left: 20%;
margin-right: auto;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
float: left;
width: 50%;
}
.main-screen {
z-index: 98;
padding: 0;
height: 100%;
width: 100%;
}
.slideshow{
display: block;
width: 100%;
padding: 0;
margin: 0;
z-index: 99;
list-style: none;
}
.image {
position: absolute;
z-index: 0;
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow: hidden;
display: block;
transition:opacity 1s ease-in-out;
-moz-transition:opacity 1s ease-in-out;
-webkit-transition:opacity 1s ease-in-out;
}
.image{
opacity: 0;
}
.active{
opacity: 1;
}
</style>
</head>
<body>
<h1>Andreas and Angelinas Couplesite</h1>
<nav>
.nav-arrows a {
width: 42px;
height: 42px;
background: #fff;
position: absolute;
top: 51%;
left: 30px;
text-indent: -9000px;
cursor: pointer;
margin-top: -21px;
opacity: 0.9;
z-index: 99999;
}
.nav-arrows a:first-child{
left: auto;
right: 30px;
background-position: top right;
}
.nav-arrows a:hover {
opacity: 1;
}
</nav>
<li class="hm2">ABOUT US</li>
<li class="hm2">DESTINATION TRIPS</li>
<li class="hm2">PICTURES</li>
<li class="hm2">CONTACT US</li>
<div style="clear:both"></div>
<h2> Hello!</h2>
<p> We are Angelina and Andreas: We enjoy taking pictures to remember great moments, like to do </p>
<div>
<li class="main-screen">
</li>
</div>
<div id="nav-arrows" class="nav-arrows">
<a href="#" class="forward">Weiter</a>
<a href="#" class="backward">Zurück</a>
</div>
<h1>Pictures of our Memories</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, …</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, …</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, …</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, …</p>
<div class="column">
<ul class="slideshow">
<li class="image"><img src="..\home\img\sonne2.jpg" width="1280" height="853" alt="sunset" class="center" /></li>
<li class="image"><img src="..\home\img\sonne1.jpg\" width="1280" height= "853" alt="secondsunset" class="center" /></li>
<li class="image"><img src="..\home\img\tik1.jpg\" width="1280" height= "853" alt="us" class="center"/></li>
<li class="image"><img src="..\home\img\tik2.jpg\" width="1280" height= "853" alt="us again" class="center"/></li>
</ul>
</div>
</body>
<script>
$(document).ready(function() {
var time = 10000,
timer;
$('.slideshow li:first-child').addClass('active');
function play() {
timer = setInterval(function(){
var next = $(".slideshow .active").removeClass("active").next(".image");
if (!next.length) {
next = $(".slideshow .image:first");
}
next.addClass("active");
}, time);
}
play();
/*Start of function for next button */
function forward() {
$('.forward').click(function() {
clearInterval(timer);
play();
var go = $(".slideshow .active").removeClass("active").next(".image").addClass("active");
if (!go.length) {
go = $(".slideshow .image:first");
}
go.addClass("active");
});
}
forward();
/*Start of function for prev button */
function previous() {
$('.backward').click(function() {
clearInterval(timer);
play();
var go = $(".slideshow .active").removeClass("active").prev(".image").addClass("active");
if (!go.length) {
go = $(".slideshow .image:last");
}
go.addClass("active");
});
}
previous();
});
/*Blendet Weiter und Zurück button aus/ein */
var timer;
$(document).mousemove(function() {
if (timer) {
clearTimeout(timer);
timer = 0;
}
$('.backward, .forward').fadeIn();
timer = setTimeout(function() {
$('.backward, .forward').fadeOut()
}, 3000)
})
</script>
</html>
@Rolf B: habe vorher noch gar nichts mit html gemacht - ich bin gerade erst dabei mir es beizubringen!
Dabei hat mir diese Seite hier schon viel geholfen. Hatte jetzt auch noch keine großen Probleme, bis auf die Slideshow die ich mir aus dem Internet kopiert habe. Da leider keine Erklärung der Begriffe und Kombinationen dabei war komme ich da nicht ganz klar.
Aber eigentlich habe ich ja im Moment nur noch das Problem, dass die Slideshow an der falschen Stelle positioniert ist und das übrige dadurch auch verschoben und nicht mehr korrekt angezeigt wird.
Grüsse idna
Gunnar Bittersmann
Der Martin
Matthias Scharwies
Matthias Apsel
Rolf B