Sydney sina
Grünschnabel
hallo habe inzwischen noch ein weiters kleines problemchen und zwar habe ich mir eine slideshow rausgesucht und eingebunden allerdings zeig er mir beim laden der seite das bzw die bilder nicht sondern erst wenn ich auf einen der pfeile klicke.
zu sehen hier
http://sydneysina.bplaced.net/
folgendes habe ich eingefügt
zusätzlich würde ich es klasse finden wenn mir jemanden sagen könnte wie ich einen zeitinterval einfügen könnte. ggfs mir den java code umschreibt da dort mein wissen definitiv aufhört.
schon jetzt vielen dank für eure hilfe, eure sydney sina
zu sehen hier
http://sydneysina.bplaced.net/
folgendes habe ich eingefügt
CSS:
* {box-sizing: border-box}
.mySlides {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1024px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
Java:
</style>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
HTML:
<div class="slideshow-container">
<div class="mySlides fade">
<img src="images/Wechselbilder/001.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<img src="images/Wechselbilder/002.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
zusätzlich würde ich es klasse finden wenn mir jemanden sagen könnte wie ich einen zeitinterval einfügen könnte. ggfs mir den java code umschreibt da dort mein wissen definitiv aufhört.
schon jetzt vielen dank für eure hilfe, eure sydney sina