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
-
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.
-
Corectare afisare imagine marita in galerie imagini
Cereri si Oferte
Primul mesaj
buna,
am incercat sa fac o galerie de imagini, am afisat o imagine mica pe ecran iar cand dau click pe ea apare intr-o dimensiune mai mare iar cu...
Ultimul mesaj
Sunt greseli in codul pe care l-ai postat, atat la partea html, cat si javascript.
De exemplu, la html, lipseste un </div> de inchidere in...
-
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 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...
-
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.