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
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
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...
-
upload si resize mai multe imagini in php
PHP - MySQL - XML
Primul mesaj
Am urmatorul script pentru upload si resize imagini cu php:
<?php
if(isset($_POST )){
include include/initialize.php ;
$targetDir =...
Ultimul mesaj
1. Ca sa redimensioneze toate imaginile, urmatorul cod ar trebui sa fie in cadrul foreach():...
-
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...
-
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 fisier index.php
PHP - MySQL - XML
Primul mesaj
buna ziua
am acest fisier,index.php si incerc sa il editez astfel incat sa imi dea ceva de genu hello world. am deschis fiserul respectiv mai intai...
Ultimul mesaj
Nu stiu care e problema, si nici nu pot afla; oricum undeva e ceva gresit.
Incearca sa vezi niste tutoriale video de inceput si testezi cum vezi ca...