Cluttered slide

Asked

Viewed 54 times

1

I’m having a problem I’m trying to make a slide effect with java , only a problem is happening, the images I chose are getting out of place as you can see below , I’ll post the codes here who can help me thank you , Hugs !!!

inserir a descrição da imagem aqui

@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>

javascript jquery html css

  • #slider a { position:Absolute; width: 970px; height: 342px; margin:auto; left: 60px; top: 2px; opacity: 0; filter: alpha(opacity=0); } Solved !!!!

No answers

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.