nicht angemeldet
@Rolf B: Vielen vielen Dank für deine Mühe und ausführlichen Antworten!
“ ...dass Du nicht weißt, was Du tust, und es rein zufälligerweise funktioniert.”: ...stimmt, aber irgendwie musste ich halt mal anfangen 😀
Ich habe einige Änderungen übernommen:
script-element ist entfernt
Navigationsbereich teilweise, jedoch bin ich mir nicht ganz sicher ob die tags: <nav> und </nav> an korrekter >Stelle sind. Das li.hm2 und ul habe ich ja für die Zentrierung meiner Menüpunkte. Daher brauche ich das doch, oder?
Bei dem Versuch deinen Vorschlag einzufügen, wurden meine Menüpunkte nämlich wieder ganz links und untereinander geschrieben.
So sieht es jetzt aktuell aus:
<!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>
<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;
}
.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;
}
ul {
text-align: left;
width: 70%;
position:relative;
left: 0%;
}
.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;
}
.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;
}
</style>
</head>
<body>
<h1>Andreas and Angelinas Couplesite</h1>
<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>
<nav>
<div id="nav-arrows" class="nav-arrows">
<a href="#" class="forward">Weiter</a>
<a href="#" class="backward">Zurück</a>
</div>
</nav>
<h1>Pictures of our Memories</h1>
<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>
Im style-Element wird mir noch als einziges .activity ausgegraut. Das war aber schon von Anfang so, fehlt da noch irgendwas?
Wie kann ich denn die Position, an der die Slideshow stattfindet, verändern?
Vielen Dank und Grüße
idna
Gunnar Bittersmann
Der Martin
Matthias Scharwies
Matthias Apsel
Rolf B