Rolando continuamente o ticker horizontal contendo imagens no jQuery?

Question

Eu gostaria de fazer algo assim: http://javascript.about.com/library/blcmarquee1.htm

O roteiro que eu referenciei, no entanto, parece ser um pouco atrasado (desatualizado?), Então eu estava me perguntando se alguém sabia de uma solução melhor. (Soluções jQuery bem -vindas.)

Answer 1

Acabei de encontrar isso-orientado a jQuery e tem imagens. Estou pretendendo usá -lo para um projeto atual.

http://logicbox.net/jquery/simpllyscroll/

Atualização: agora usei isso no código de produção. O plug -in é capaz de loop 70+ 150 × 65px imagens de maneira bastante suave - que um número de outro plug -in que eu tentei semelhante a isso estava falhando.

Observe que cheirava a estragos com z-index questões no IE 6/7 e não estava aparecendo etc. - mas isso também pode ter sido em parte devido ao meu CSS. Para quem está tendo problemas com isso, não aparece no IE, confira o padrão, ou seja, z-index Conserta: http://www.google.com/search?q=ie+z+index+issues

Atualização mais recente: Adicionar coisas a serem consideradas ao implementar plug-ins como estes:

• O número de itens e o tipo de conteúdo para rolar. Encontrei um número que começaria a falhar assim que você disse mais do que 15 imagens para rolar.
• Encontrei vários desses plugins vinculados a versões antigas de jQuery
• Se as imagens de rolagem forem todas o mesmo tamanho, um número de plug-ins que experimentei apenas funcionou se todas as imagens tivessem o mesmo tamanho, mas não o deixassem claro nos tutoriais. Acredito que os plug -ins são executados em seguida, defina uma sequência de tags Li que são todas x de largura e calcule a distância total de todas acorrentadas para gerenciar a rolagem.
• Efeitos - alguns rolavam continuamente outros moveriam uma pausa de imagem por um segundo e depois moveria outra imagem

Agora também achei esses dois plugins de roller muito bons.

http://caroufredsel.frebsite.nl/

http://sorgalla.com/jcarousel/

Answer 2

A tenda de sedoso jQuery e Marquise de Giva Labs

Answer 3

Apenas um pensamento. Você poderia fazer algo assim.

<style type="text/css">

.imgwindow{
width:500px; //or whatever
height:65px; //or whatever
position:relative;
overflow:hidden;
}

.imgholder{
min-width:2000px;
height:65px;
position:absolute;
left:-200px;
}

.inline-image{
display:inline-block;
}

</style>

<script type="text/javascript">

var img;

function imgScroll(){
 img = $(".inline-image").first();
 img.animate({width:0},2500,'linear',function(){
   img.remove();
   $(".imgholder").append(img);
   imgScroll();
 });

}

$(document).ready(function(){

imgScroll();  

});

</script>

e o html

<div class="imgwindow">
  <div class="imgholder">
   <img class="inline-image" src="image1" /><img class="inline-image" src="image2" />...
  </div>
</div>