Animation Slide to

Question

Animation Slide to

Navigation

#1 by (0 votes)

0

I have a problem with the slide, it does the image transactions but when it arrives on the last it stops and does not go back to the first image

It stops exactly in this image

@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

asked by anonymous 24.05.2017 / 20:31

1 answer

Ionic 2 network.type = null Visual Form Inheritance C #

score 0 · Accepted Answer

Put 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"/><imgclass="foto" src="http://kithomepage.com/images/Imagem002.jpg"/><imgclass="foto" src="http://kithomepage.com/images/Imagem003.jpg" />
</section>
</div>