Slide animation for

Asked

Viewed 159 times

0

I have a problem on the slide , he does the image transactions but when he arrives at the last he stops and does not return to the first image inserir a descrição da imagem aqui

he stops right in that picture 

@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:1080px;
	margin:auto;
	
}

#menufundo {
	background:url(../imagens/menu.png);
	position:relative;
	width:1024px;
	height:27px;
	margin:auto;
	border:1px solid #000000 ;
	
	
}


#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;
}

.galeria{
	width:850px;
	height:300px;
	overflow: hidden;
	float: left;
	border: 15px solid #999;
	border-radius: 10px;
	margin-left:70px;
	margin-top:50px;
		
}

.foto {
	position:absolute;
	opacity:0;
	animation-name:slide;
	animation-duration:50s;
	animation-iteration-count:infinite;
}

@keyframes slide {
	5% {
		opacity:1;
	}
	25% {
		opacity:1;
	}
	50% {
		opacity:1;
	}
		
}

.foto:nth-child(1) {
	
} 
	
.foto:nth-child(2) {
	animation-delay:5s;
	
} 
	
.foto:nth-child(3) {
	animation-delay:10s;
	
} 
<!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>
</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">
<section class="galeria">
 <img class="foto" src="imagens/img1.jpg" />
 <img class="foto" src="imagens/img2.jpg" /> 
 <img class="foto" src="imagens/img3.jpg" />
</section>
</div><!--div final menufundo--> 	       
			
                                
</body>
</html>

html css

1 answer

0


Place a function in javascript

var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("foto");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 2000); //  2 segundos
}
<div id ="fundoinicial">
<section class="galeria">
 <img class="foto" src="http://kithomepage.com/images/Imagem001.jpg" />
 <img class="foto" src="http://kithomepage.com/images/Imagem002.jpg" /> 
 <img class="foto" src="http://kithomepage.com/images/Imagem003.jpg" />
</section>
</div>

  • Thank you very much , Hugs !!!

Browser other questions tagged html css

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