exame final

Rúben Periquito Developer · April 2, 2020 at 04:07 PM

Tenho ficheiros de teste onde eu faço o código para experimentos e depois copio-o para o ficheiro “oficial”

Quero saber o que está mal neste trabalho:

Se vocêS o experimentarem notam que ao clicar nas “setas” algumas vezes, o trabalho fica “meio-bugado” porquê?

P.S- TEM O CÓDIGO HTML, CSS E JAVASCRIPT

CÓDIGO HTML:

<!DOCTYPE html>

<html>

<head>

<style>

* {box-sizing: border-box}

body {font-family: Verdana, sans-serif; margin:0}

.mySlides {display: none}

img {vertical-align: middle;}

/* Slideshow container */

.slideshow-container {

max-width: 1000px;

position: relative;

margin: auto;

}

/* Next & previous buttons */

.prev, .next {

cursor: pointer;

position: absolute;

top: 50%;

width: auto;

padding: 16px;

margin-top: -22px;

color: orange;

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.8);

}

/* Caption text */

.text {

color: #f2f2f2;

font-size: 15px;

padding: 8px 12px;

position: absolute;

bottom: 8px;

width: 100%;

text-align: center;

}

/* Number text (1/3 etc) */

.numbertext {

color: #f2f2f2;

font-size: 12px;

padding: 8px 12px;

position: absolute;

top: 0;

}

/* The dots/bullets/indicators */

.dot {

cursor: pointer;

height: 15px;

width: 15px;

margin: 0 2px;

background-color: #bbb;

border-radius: 50%;

display: inline-block;

transition: background-color 0.6s ease;

}

.active, .dot:hover {

background-color: #717171;

}

/* 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>

<body>

<div class="text">Tuning Luxo</div>

</div>

<div class="text">BMW Tuning</div>

</div>

</div>

<br>

</div>

var slideIndex = 0;

showSlides();

function showSlides() {

var i;

var slides = document.getElementsByClassName("mySlides");

var dots = document.getElementsByClassName("dot");

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

slides.style.display = "none";

}

slideIndex++;

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

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

dots.className = dots.className.replace(" active", "");

}

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

dots[slideIndex-1].className += " active";

setTimeout(showSlides, 2000); // Change image every 2 seconds

}

</script>

</body>

</html>

CÓDIGO CSS:

* {box-sizing:border-box}

body {

background-color: #2C3E50;

}

/* Slideshow container */

.slideshow-container {

max-width: 1000px;

position: relative;

margin: auto

background: #000;

overflow: hidden;

}

/* Hide the images by default */

.mySlides {

display: none;

}

/* Next & previous buttons */

.prev, .next {

cursor: pointer;

position: absolute;

top: 50%;

width: auto;

margin-top: -22px;

padding: 16px;

color: orange;

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.8);

}

/* Caption text */

.text {

color: #f2f2f2;

font-size: 15px;

padding: 8px 12px;

position: absolute;

bottom: 8px;

width: 100%;

text-align: center;

}

CÓDIGO JAVASCRIPT:

var slideIndex = 1;

showSlides(slideIndex);

// Next/previous controls

function plusSlides(n) {

showSlides(slideIndex += n);

}

// Thumbnail image controls

function currentSlide(n) {

showSlides(slideIndex = n);

}

function showSlides(n) {

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

}

Zex · April 3, 2020 at 08:30 AM

Olhando assim por alto só vi o problema de nos ciclos "for" não usares a variável "i" - por exemplo:

slides[i]

Já viste os erros que aparecem na consola?

PS: Quando colocares aqui código, usa a opção de colocar código: <>

Edited April 3, 2020 at 08:32 AM by Zex

Sign In

exame final

Recommended Posts

Rúben Periquito Developer

Link to comment

Share on other sites

Zex

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information