Pesquisar na Comunidade
Mostrando resultados para as tags ''css html java jquery''.
Encontrado 1 registro
-
Estou com um problema estou tentando fazer um efeito slide com java , só que esta acontecendo um problema, as imagens que escolhi estão ficando fora do lugar como podem ver a baixo , vou postar os codigos aqui quem poder me ajudar agradeço , Abraços !! Css e HTML abaixo : @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:1230px; 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="Trabalhamos com Diversos Produtos e Modelos"/></a> <a href="#" class="trs"><img src="imagens/img2.jpg" alt="Qualidade em Atendimento" /></a> <a href="#" class="trs"><img src="imagens/img3.jpg" alt="Oficina Qualificada" /></a> </div> <figcaption></figcaption> </figure> <div class="rodape"></div> </div><!--div final menufundo--> </body> </html>