JavaScript/jQuery: procurando script de desbotamento da imagem
-
25-09-2019 - |
Pergunta
Estou procurando um script leve (JavaScript Pure preferencial) - deve ser para desbotamento suavemente uma sequência de imagens entre si (= imagem -carrossel). Também deve ser possível executar várias instâncias (por isso deve ser um script de protótipo), como por exemplo: - Banner de site: desbotamento de 3 imagens após o outro - Conteúdo principal: 3 galerias, cada um desbotamento de 3-5 imagens
Alguma recomendação qual script para usar para esse fim?
obrigado!
Solução
Eu usei o jQuery Plug -in cruzado E funciona bem.
Outras dicas
Olá, escrevi um script simples que utiliza os métodos jQuery .Fadeout () e .Fadein (), juntamente com algumas linhas de HTML e CSS. Com os IDs para os elementos da imagem numerados 1 para n, o algoritmo pode facilmente iterar através das imagens e começar novamente quando chegar à última imagem. Pode ser facilmente adaptado para fazer as transições ocorrerem automaticamente após um certo atraso de tempo, em vez de disparar em um botão clique em. Avise-me se isso ajudar. Aqui está o código:
<style type="text/css">
#images{ overflow:auto; }
.current{ display:inline; }
.hidden{ display:none; }
</style>
<script type="text/javascript" >
function doFade(current){
var speed = 500;
next = $("#"+(parseInt(current.attr("id")) + 1));
if(next.length <= 0) next = $("#1");
current.fadeOut(speed,
function fadeNextIn(){
current.attr("class", "hidden");
next.fadeIn(speed,
function afterFadeNextIn(){
next.attr("class","current");
}
);
}
);
}
$(document).ready(
function () {
$("#btnNext").click(
function(){
doFade($("#images .current"));
}
);
}
);
</script>
<div id="images">
<img id="1" title="image 1" alt="image 1" src="1.jpg" class="current" />
<img id="2" title="image 2" alt="image 2" src="2.jpg" class="hidden" />
<img id="3" title="image 3" alt="image 3" src="3.jpg" class="hidden"/>
<img id="4" title="image 4" alt="image 4" src="4.jpg" class="hidden"/>
</div>
<input id="btnNext" type="button" value="next" />