Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

edersonneves

Slide com javascript não esta dando certo os links

Recommended Posts

Não estou conseguindo fazer funcionar os links nas imagens nesse slide quando faz a mudança, todas as imagens pega somente o ultimo link alguém pode me ajudar

<style>
		* {margin: 0; padding: 0;}
				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: relative; z-index: 1;}
		#slider a { position: absolute; top: 0; left: 0; opacity: 0;filter:alpha(opacity=0);}
		.ativo {opacity: 1!important; filter:alpha(opacity=100)!important;}
		
		/*controladores*/
		span {background: #000; cursor: pointer; opacity: 0;filter:alpha(opacity=0); position: absolute; bottom: 40%; width: 43px; height: 43px; z-index: 5;}
		.next {right: 10px;}
		.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: 10px;}
		.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: 640px;
			height: 350px;
			position: relative;
			overflow: hidden;
			margin: 0px auto;
		}
		figcaption {padding-left: 3px;color: #fff; font-family: "Kaushan Script","Lato","arial"; font-size: 20px; background: rgba(0, 0, 0, 0.76); width: 640px; position: absolute; bottom: 0; left: 0;  height: 55px; z-index: 5}
	</style>
<?php
require 'conexaocompdo.php';
    try {
            $result = $db->prepare("SELECT id_noticias, cidade_noticia, foto_capa, titulo_noticias, redacao_noticias from `tbl_noticias` where tipo_noticias <> 'Notícias Geral' order by id_noticias desc limit 4");
            $result->execute();
        }
    catch(PDOException $error)  {
                                    echo "Erro ao selecionar a tabela eventos: ".$error->getMessage();
                                }
    $i=0;
    while($linha = $result->fetch(PDO::FETCH_ASSOC)) {
                                                        $id_noticias[]=(int)$linha['id_noticias'];
                                                        $cidade_noticia[]=$linha['cidade_noticia'];
                                                        $titulo_noticia[] = stripslashes($linha['titulo_noticias']);
                                                        $redacao_noticias[] = $linha['redacao_noticias'];
                                                        if ($linha['foto_capa'] == "") {
                                                                                        $imagem[] = "imagens190/logoprincipal.jpg";
                                                                                       }
                                                        else {
                                                                $imagem[] = $linha['foto_capa'];
                                                             }                                                       
                                                   }                                                   
?>
	<figure>
		<span class="trs next"></span>
		<span class="trs prev"></span>

		<div id="slider">
			<a href="noticia-completa.php?id_noticias=1463" class="trs"><img src="<?php echo $imagem[0];?>" alt="<?php echo $cidade_noticia[0].' - '.$titulo_noticia[0];?>" width="640px" height="350px"/></a>
			<a href="noticia-completa.php?id_noticias=1462" class="trs"><img src="<?php echo $imagem[1];?>" alt="<?php echo $cidade_noticia[1].' - '.$titulo_noticia[1];?>" width="640px" height="350px"/></a>
			<a href="noticia-completa.php?id_noticias=1461" class="trs"><img src="<?php echo $imagem[2];?>" alt="<?php echo $cidade_noticia[2].' - '.$titulo_noticia[2];?>" width="640px" height="350px"/></a>
			<a href="noticia-completa.php?id_noticias=1460" alt="<?php echo $cidade_noticia[3].' - '.$titulo_noticia[3];?>" width="640px" height="350px"/></a>			
		</div>

		<figcaption></figcaption>
	</figure>

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.