M
MrsMey
Member
- Beiträge
- 7
- Punkte Reaktionen
- 0
Also erstmal hallo 
ich bin die Jay neu hier und brauche mal dringend eure Hilfe ^^
Folgendes Problem und ich denke das wird wohl das Javascript sein weiß aber einfach nicht weiter.
Bin gerade dabei eine Slideshow für meine Seite zu basteln und habe erstmal standardmäßig angefangen zu schreiben
damit ich zumindest die Funktionen drin hab etc. Hab dazu einen Container definiert und den auch mit allem drum
und dran in meinem HTML auch das CSS definiert und mein Javascript in der HTML eben als Script.
So und nun das Problem.. Die Funktionen sind soweit alle okay und auch soweit was das Aussehen angeht, allerdings
schaffe ich es nicht sie untereinander anzuordnen, der haut mir die Slideshows immer wieder übereinander trotz <br>
oder Änderung was die Position angeht.. Könnt ihr mir dabei helfen was ich da falsch mache?
Danke schon mal im Voraus
Hier die Seite
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
</title>
<meta name="description" content="Jacknology">
<link rel="stylesheet" href="main.css">
</head>
<center><img src="bilder/%C3%9Cberschrift%20stage%20systems.png" style='height: 100px; width: 600px'></center>
<body>
<head>
<title>Slideshow Images</title>
<style>
* {box-sizing: border-box}
body {
font-family: Verdana, sans-serif;
margin:0}
.mySlides {display: none}
img {vertical-align: middle;}
.slideshow-container {
max-width: 800px;
position: relative;
margin: auto;
background-color: floralwhite;
}
/* 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;
user-select: none;
}
/* 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.5);
}
/* Caption text */
.text {
color: black;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 150px;
right: 120px;
width: 100%;
text-align: right;
}
/* Number text (1/3 etc) */
.numbertext {
color: black;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: progress;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #55b1bf;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #a271d6;
}
/* 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}
}
</style>
</head>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="bilder/A15%20focus.png" style="width:300px">
<div class="text"><b>J Line 15/wide or Focus</b>
<br>
<br>
Passive 15" 2 Way
Full Range Speaker
<br>
Wide: 30°
<br>
Focus: 15°
</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="bilder/A15%20focus(2).png" style="width:300px">
<div class="text">HF 3"compression driver
<br>
<br>
LF 15" Neodymium Woofer
</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="bilder/A15%20focus(3).png" style="width:300px">
<div class="text">Impedance:8Ω
<br>
Powerrating: 500 W(rms)
<br>
Maximum SPL 141dB
<br>
Angel: 70°/110°
<br>
Symmetric or 90° Asymmetric
<br>
Dimension(HXWXD): 424x764x495mm
</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides {
showSlides(slideIndex += n);
}
function currentSlide {
showSlides(slideIndex = n);
}
function showSlides {
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.style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots.className = dots.className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
</body>
</html>
ich bin die Jay neu hier und brauche mal dringend eure Hilfe ^^Folgendes Problem und ich denke das wird wohl das Javascript sein weiß aber einfach nicht weiter.
Bin gerade dabei eine Slideshow für meine Seite zu basteln und habe erstmal standardmäßig angefangen zu schreiben
damit ich zumindest die Funktionen drin hab etc. Hab dazu einen Container definiert und den auch mit allem drum
und dran in meinem HTML auch das CSS definiert und mein Javascript in der HTML eben als Script.
So und nun das Problem.. Die Funktionen sind soweit alle okay und auch soweit was das Aussehen angeht, allerdings
schaffe ich es nicht sie untereinander anzuordnen, der haut mir die Slideshows immer wieder übereinander trotz <br>
oder Änderung was die Position angeht.. Könnt ihr mir dabei helfen was ich da falsch mache?
Danke schon mal im Voraus
Hier die Seite
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
</title>
<meta name="description" content="Jacknology">
<link rel="stylesheet" href="main.css">
</head>
<center><img src="bilder/%C3%9Cberschrift%20stage%20systems.png" style='height: 100px; width: 600px'></center>
<body>
<head>
<title>Slideshow Images</title>
<style>
* {box-sizing: border-box}
body {
font-family: Verdana, sans-serif;
margin:0}
.mySlides {display: none}
img {vertical-align: middle;}
.slideshow-container {
max-width: 800px;
position: relative;
margin: auto;
background-color: floralwhite;
}
/* 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;
user-select: none;
}
/* 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.5);
}
/* Caption text */
.text {
color: black;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 150px;
right: 120px;
width: 100%;
text-align: right;
}
/* Number text (1/3 etc) */
.numbertext {
color: black;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: progress;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #55b1bf;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #a271d6;
}
/* 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}
}
</style>
</head>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="bilder/A15%20focus.png" style="width:300px">
<div class="text"><b>J Line 15/wide or Focus</b>
<br>
<br>
Passive 15" 2 Way
Full Range Speaker
<br>
Wide: 30°
<br>
Focus: 15°
</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="bilder/A15%20focus(2).png" style="width:300px">
<div class="text">HF 3"compression driver
<br>
<br>
LF 15" Neodymium Woofer
</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="bilder/A15%20focus(3).png" style="width:300px">
<div class="text">Impedance:8Ω
<br>
Powerrating: 500 W(rms)
<br>
Maximum SPL 141dB
<br>
Angel: 70°/110°
<br>
Symmetric or 90° Asymmetric
<br>
Dimension(HXWXD): 424x764x495mm
</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides
{showSlides(slideIndex += n);
}
function currentSlide
{showSlides(slideIndex = n);
}
function showSlides
{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.style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots.className = dots.className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
</body>
</html>
