Problema slideshow imagini
Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
-
elena
- Mesaje: 5
Problema slideshow imagini
buna,
am acest cod cu ajutorul caruia pot rula mai multe imaigini de tip slideshow, dar se opreste la imaginea nr patru si nu stiu care e problema.
Cod: Selectaţi tot
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: black;
margin:0 auto;
}
.continut{
margin:10px;
padding:20px;
width:1400px;
height:700px;
border:2px solid black;
background-image: url("gradient.png");
}
.slideshow-container {
max-width: 700px;
position: relative;
margin: auto;
padding:20px;
}
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
}
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 3s;
}
@-webkit-keyframes fade {
from {opacity: .2}
to {opacity: 2}
}
@keyframes fade {
from {opacity: .2}
to {opacity: 2}
}
</style>
</head>
<body>
<div class="continut">
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 6</div>
<img src="unu.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 6</div>
<img src="doi.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 6</div>
<img src="trei.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 6</div>
<img src="patru.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 6</div>
<img src="unu.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">6 / 6</div>
<img src="sase.jpg" style="width:100%">
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides fade");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides.style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 0}
for (i = 0; i < dots.length; i++) {
dots.className = dots.className.replace(" active", "block");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className = " active";
setTimeout(showSlides, 2000);
}
</script>
</body>
</html>
MarPlo
Mesaje: 4343
Salut
Incearca sa inlocuiesti script-ul JS din codul tau cu acesta:
Cod: Selectaţi tot
<script>
var slideIndex =1;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides fade");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
if (slideIndex > slides.length) slideIndex = 1;
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "block");
}
slides[slideIndex-1].style.display = "block";
if(dots[0]) dots[0].className = " active";
slideIndex++;
setTimeout(showSlides, 2000);
}
</script>
- Poti sa incerci si script-urile de SlideShow de la aceste pagini:
https://coursesweb.net/javascript/slides ... ascript_s2
https://coursesweb.net/jquery/feature-ca ... ideshow_jp
elena
Mesaje: 5
am inlocuit:
cu acesta:
si a functionat.
Multumesc!
Subiecte similare
-
Imagini Slider bootstrap
HTML - XHTML - CSS
Salutare,
de curand am cumparat un template de pe teamforest pe care l-am pus pe perlamuntilor.ro ideea e ca ma bate rau bootstrapul asta.
Cum...
-
Formular de contact cu upload imagini
Scripturi de pe site
Primul mesaj
Salutare si la multi ani!
Revin cu o intrebare pentru scriptul formular de contact, de la pagina: marplo.net/php-mysql/formular_contact
Este...
Ultimul mesaj
M-am uitat pe codul din formularul de contact.
Am decis sa nu ma complic cu asa multe adaugari si verificari in acel script.
-
Adaugare text/imagini/video printr-un buton de catre utilizatori
Discutii si Intrebari Diverse
Primul mesaj
Salut,
Lucrez la un site de social media si vreau ca pentru o categorie din membrii care s-au inregistrat pe site sa existe un buton ceva prin care...
Ultimul mesaj
Am uitat sa specific ca am create un div in mijlocul paginii in interiorul caruia se va afla postarea respectivului utilizator, iar la fiecare...
-
Problema curs de Engleza
Sesizari Erori si Greseli
Primul mesaj
Buna.
Am descarcat cursul curs_eurocor-engleza_incepatori_1-16.rar si cand vreau sa-l dezarhivez imi da eroarea asta:
An error occures whilw...
Ultimul mesaj
Buna,
Poti sa descarci cursul de engleza, nivel intermediar, de la urmatoarele linkuri:
- Lectiile 1-16...
-
O mica problema de animatie CSS
HTML - XHTML - CSS
Primul mesaj
Noroc, MarPlo!
1. Am vizitat pe twitter un site de animatie, in care website-ul actual se numeste CSS-Challenges,com. In respectivul website, sunt...
Ultimul mesaj
1. Multumesc pentru raspuns.
2. Am inteles raspunsul tau: este un mic examen oferit voluntarilor online, pentru a le afla capacitatile de rezolvare...
-
Problema instalare Anime.JS
JavaScript - jQuery - Ajax
Primul mesaj
Salutare!
1. 6 decembrie 2020, 23.15 - download Anime.JS
2. Putin mai devreme, am incercat sa downloadez acest concept bazat pe JavaScript.
3....
Ultimul mesaj
Nu am inteles care e concret problema pe care o ai cu scriptul anime.js.