1

Aparentemente, o código está correto, é o seguinte:

{
if( $(".ativo").next().size() ) 
{ 
    $(".ativo").fadeOut().removeClass("ativo").next().fadeIn().addClass("ativo")
}
else 
{ 
    $(".ativo").fadeOut().removeClass("ativo");
    $("#slide img").eq(0).fadeIn().addClass("ativo")
 }

E o html atual:

<div id="slide">

            <a href="CURSOS.html"><img id="slideIMG1" src="IMAGENS/mao (370px) - Final.jpg" width="1155" height="370" alt=""/></a>
            <a href="#"><img id="slideIMG2" src="IMAGENS/picjumbo (370px).jpg" width="1155" height="370" alt=""/></a>

         </div>     
6
  • 4
    Cadê o .ativo no seu html? E o seletor da imagem está com o índice fixo $("#slide img").eq(0). Vai sempre pegar a primeira imagem. Commented 16/09/2015 às 12:19
  • 1
    Não entendi, onde no código acima que está "retornando" alguma coisa? A propósito, na sua última linha você usa um eq(0), então esse seletor é filtrado para se aplicar somente ao primeiro resultado previamente selecionado (i.e. se "#slide img" selecionou duas imagens, o eq(0) vai fazer com que só a primeira continue como parte do conjunto).
    – mgibsonbr
    Commented 16/09/2015 às 12:20
  • conforme o @DontVoteMeDown falou, realmente o eq(0) vai ativar somente a primeira imagem, mas afinal o que você quer fazer com um slide e duas imagens ? Commented 16/09/2015 às 12:20
  • Não entendi. Pois se houver algo após a primeira, é para ele exibir esse algo e adicionar a classe "ativo" a esse algo.
    – Harison
    Commented 16/09/2015 às 12:20
  • 1
    ativo é uma classe aplicada à imagem em si ou ao link (a)? Se for ao img, acho que identifiquei seu problema... (nenhuma imagem aí tem next, elas são filhas únicas do seu a)
    – mgibsonbr
    Commented 16/09/2015 às 12:23

1 Resposta 1

3

Seu problema é que a imagem não tem irmãos, ela é filha única do link (a), de modo que o next não retornará nada. Para selecionar a próxima imagem, é necessário subir ao pai, pegar o próximo link e então descer de novo à imagem:

function mudar() { 
            
    if( $(".ativo").parent().next().size() ) 
    { 
        $(".ativo").fadeOut().removeClass("ativo")
            .parent().next().children("img")
            .fadeIn().addClass("ativo")
    }
    else 
    { 
        $(".ativo").fadeOut().removeClass("ativo");
        $("#slide img").eq(0).fadeIn().addClass("ativo")
    }
}
mudar();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button onclick="mudar()">Teste</button>
<div id="slide">

    <a href="CURSOS.html"><img id="slideIMG1" src="http://sempreupdate.org/wp-content/uploads/2014/12/google-small.png" alt="A"/></a>
    <a href="#"><img id="slideIMG2" src="https://s1.yimg.com/rz/d/yahoo_en-US_f_p_bestfit_2x.png" alt="B" class="ativo"/></a>

</div>

Alternativamente, você pode aplicar a classe ao a em vez do img, simplificando seu código (se for possível fazer isso sem "quebrar" demais seu CSS, é claro).

1
  • Funcionou. É isso mesmo. Muito obrigado.
    – Harison
    Commented 16/09/2015 às 12:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .