Jump to content
Rúben Periquito Developer

exame final

Recommended Posts

Rúben Periquito Developer

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>

<link rel="stylesheet" type="text/css" href="teste.css">

<script type="text/javascript" src="teste.js"></script>

 

<meta name="viewport" content="width=device-width, initial-scale=1">

 

<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="slideshow-container">

 

<div class="mySlides fade">

  <div class="numbertext">1 / 2</div>

  <img src="paisagem/destaque-home-2.png" style="width:100%">

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

</div>

 

<div class="mySlides fade">

  <div class="numbertext">2 / 2<</div>

  <img src="paisagem/destaque-home.png" style="width:100%">

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

</div>

 

<a class="prev" onclick="plusSlides(-1)">&#10094</a>

<a class="next" onclick="plusSlides(1)">&#10095</a>

 

</div>

<br>

 

<div style="text-align:center">

  <span class="dot" onclick="currentSlide(1)"></span>

  <span class="dot" onclick="currentSlide(2)"></span>

</div>

 

<script>

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

}


Rúben Periquito 

Share this post


Link to post
Share on other sites
Zex

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 by Zex

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.