I'm having a problem trying to make a slide effect with java, but this is a problem, the images I chose are getting out of place as they can see below, I'll post the codes here who can help me thank you, Hugs !!!
@charset "utf-8";
/* CSS Document */
#topo {
background:url(../imagens/topo.png);
position:inherit;
width:1024px;
height:190px;
border-bottom:none;
margin:auto;
}
#logo {
float:left;
background:url(../imagens/logoc.png);
position:relative;
top:50px;
left:155px;
width:541px;
height:133px;
}
#fundoinicial {
background-image:url(../imagens/fundoof.png);
width:1024px;
height:1185px;
margin:auto;
}
#menufundo {
background:url(../imagens/menu.png);
position:relative;
width:1024px;
height:27px;
margin:auto;
}
#ul li a{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-style:normal;
list-style-type:none;
display: inline;
font-size:20px;
line-height:0px;
padding:10px;
margin:4px 0 0 52px;
color:#FFF;
text-decoration:none;
float:left;
}
#ul li a:hover{
text-shadow:0px 0px 0px black,
0px 0px 0px black,
0px 0px 0px black,
0px 0px 0px black;
font-size:20px;
color:black;
}
.rodape {
background: url(../imagens/rodape.png);
margin: auto;
position: absolute;
width: 1100px;
height: 99px;
left: 131px;
top: 1400px;
}
* {margin: 0; padding: 0;}
body {background: #000}
a,img {border: none;}
.trs {-webkit-transition:all ease-out 0.5s;
-moz-transition:all ease-out 0.5s;
-o-transition:all ease-out 0.5s;
-ms-transition:all ease-out 0.5s;
transition:all ease-out 0.5s;}
#slider {
position: absolute;
width: 970px;
height: 342px;
margin:auto;
z-index: 0;
left: -22px;
top: 1px;
border: 1px solid #666;
}
#slider a {
position:relative;
top: 0px;
left: 10px;
opacity: 0;
filter: alpha(opacity=0);
}
.ativo {opacity: 1!important; filter:alpha(opacity=100)!important;}
/*controladores*/
span {
background: #999;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
bottom: 134px;
width: 43px;
height: 43px;
z-index: 5;
}
.next {
right: 12px;
}
.next:before,.next:after {left: 21px;}
.next:before {
-webkit-transform: rotate(-42deg);
top: 5px;
}
.next:after {
-webkit-transform: rotate(-132deg);
top: 19px;
}
.next:before,.next:after,.prev:before,.prev:after {content: "";
height: 20px;
background: #fff;
width: 1px;
position: absolute;
}
.prev {
left: -12px;
}
.prev:before,.prev:after {left: 18px;}
.prev:before {
-webkit-transform: rotate(42deg);
top: 5px;
}
.prev:after {
-webkit-transform: rotate(132deg);
top: 19px;
}
figure:hover span {opacity: 0.76;filter:alpha(opacity=76);}
figure {
max-width: 950px;
height: 310px;
position: relative;
top:60px;
left:0px;
margin:0px 0 0 50px;
}
figcaption {
color: #000;
font-family: "Kaushan Script","Lato","arial";
font-size: 22px;
text-align: center;
background: #CCC;
width: 970px;
position: absolute;
margin: auto;
bottom: -34px;
left: -21px;
line-height: 55px;
height: 45px;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Alfatec</title>
<link rel="shortcut icon" href="imagens/ico.png" type="imagem/x-png" />
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/estilo.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background-image: url(../PLANILHAS%20CAIO/projeto/imagens/fundo.jpg);
}
</style>
<script type="text/javascript">
function setaImagem(){
var settings = {
primeiraImg: function(){
elemento = document.querySelector("#slider a:first-child");
elemento.classList.add("ativo");
this.legenda(elemento);
},
slide: function(){
elemento = document.querySelector(".ativo");
if(elemento.nextElementSibling){
elemento.nextElementSibling.classList.add("ativo");
settings.legenda(elemento.nextElementSibling);
elemento.classList.remove("ativo");
}else{
elemento.classList.remove("ativo");
settings.primeiraImg();
}
},
proximo: function(){
clearInterval(intervalo);
elemento = document.querySelector(".ativo");
if(elemento.nextElementSibling){
elemento.nextElementSibling.classList.add("ativo");
settings.legenda(elemento.nextElementSibling);
elemento.classList.remove("ativo");
}else{
elemento.classList.remove("ativo");
settings.primeiraImg();
}
intervalo = setInterval(settings.slide,4000);
},
anterior: function(){
clearInterval(intervalo);
elemento = document.querySelector(".ativo");
if(elemento.previousElementSibling){
elemento.previousElementSibling.classList.add("ativo");
settings.legenda(elemento.previousElementSibling);
elemento.classList.remove("ativo");
}else{
elemento.classList.remove("ativo");
elemento = document.querySelector("a:last-child");
elemento.classList.add("ativo");
this.legenda(elemento);
}
intervalo = setInterval(settings.slide,4000);
},
legenda: function(obj){
var legenda = obj.querySelector("img").getAttribute("alt");
document.querySelector("figcaption").innerHTML = legenda;
}
}
//chama o slide
settings.primeiraImg();
//chama a legenda
settings.legenda(elemento);
//chama o slide à um determinado tempo
var intervalo = setInterval(settings.slide,4000);
document.querySelector(".next").addEventListener("click",settings.proximo,false);
document.querySelector(".prev").addEventListener("click",settings.anterior,false);
}
window.addEventListener("load",setaImagem,false);
</script>
</head>
<body>
<div id="logo"></div><!--div final do logo-->
<div id="topo"></div><!--div final topo-->
<div id="menufundo">
<nav id="ul">
<ul>
<li><a href="#">Página Inicial </a></li>
<li><a href="#">Quem Somos</a></li>
<li><a href="#">Áreas de Cobertura</a></li>
<li><a href="#">Serviços</a></li>
<li><a href="#">Fale Conosco</a></li>
</ul>
</nav>
</div>
<div id ="fundoinicial">
<figure>
<span class="trs next"></span>
<span class="trs prev"></span>
<div id="slider">
<a href="#" class="trs"><img src="imagens/img1.jpg" alt="Teste1" width="873" /></a>
<a href="#" class="trs"><img src="imagens/img2.jpg" alt="Legenda da imagem 2" /></a>
<a href="#" class="trs"><img src="imagens/img3.jpg" alt="Legenda da imagem 2" /></a>
</div>
<figcaption></figcaption>
</figure>
<div class="rodape"></div>
</div><!--div final menufundo-->
</body>
</html>