Kezdőoldal » Számítástechnika » Programozás » Hogyan tudom megoldani, hogy...

Hogyan tudom megoldani, hogy a képek bizonyos időközönként váltsák egymást automatikusan?

Figyelt kérdés

Kedves Programozók!


A kód amit írtam:


<!DOCTYPE html>

<html>

<head>


<style>



#home-section {


width: 1280px;

height: 850px;

background-color: white;



display: block;


position: relative;


top: 175px;

}



.slideshow-container {

max-width: 1280px;

position: absolute;


margin: 0;

}


.prev, .next {

cursor: pointer;

position: absolute;

top: 0;

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;

}



right: 0;

border-radius: 3px 0 0 3px;

}



.prev:hover, .next:hover {

background-color: red;

}



.text {

color: #f2f2f2;

font-size: 15px;

padding: 8px 12px;

position: absolute;

bottom: 8px;

width: 100%;

text-align: center;

}



.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) {

.slprev, .slnext,.text {font-size: 11px}

}


</style>



<section id="home-section" class="slider">


<div class="slideshow-container">


<div class="mySlides fade">


<img src="kep1.jpg" style="width:100%">

<div class="text">szöveg1</div>

</div>


<div class="mySlides fade">


<img src="kep2.jpg" style="width:100%">

<div class="text">szöveg2</div>

</div>


<div class="mySlides fade">


<img src="kep3.jpg" style="width:100%">

<div class="text">szöveg3</div>

</div>


<a class="prev" onclick="plusSlides(-1)">❮</a>

<a class="next" onclick="plusSlides(1)">❯</a>


</div>



</section>



<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");


if (n > slides.length) {slideIndex = 1}

if (n < 1) {slideIndex = slides.length}

for (i = 0; i < slides.length; i++) {

slides[i].style.display = "none";

}


slides[slideIndex-1].style.display = "block";

}

</script>



</body>

</html>



Ehhez szeretném még hozzáadni, hogy a képek automatikusan is váltsák egymást.

Köszönöm a segítséget!!



#javascript #HTML #Java #CSS #Slide #automatikus váltás
2016. aug. 18. 20:39
 1/1 anonim ***** válasza:
2016. aug. 21. 17:33
Hasznos számodra ez a válasz?

Kapcsolódó kérdések:




Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu

A weboldalon megjelenő anyagok nem minősülnek szerkesztői tartalomnak, előzetes ellenőrzésen nem esnek át, az üzemeltető véleményét nem tükrözik.
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!