Непрерывно прокручивать горизонтальный тикер, содержащий изображения в jQuery?

Question

Я хотел бы сделать что -то вроде этого: http://javascript.about.com/library/blcmarquee1.htm

Сценарий, на который я упоминал, однако, кажется немного отсталым (устаревшим?), Поэтому мне было интересно, знает ли кто -нибудь о лучшем решении. (Jquery Solutions приветствуются.)

Answer 1

Только что нашел это-управляемый jQuery и имеет изображения. Я собираюсь использовать его для текущего проекта.

http://logicbox.net/jquery/simplyscroll/

Обновление: я теперь использовал это в производственном коде. Плагин способен зацикнуть изображения 70+ 150 × 65px довольно гладко, - который, по которому я пробовал другой плагин, аналогичный этому, не удалось.

Обратите внимание, что это разрушило z-index Проблемы в IE 6/7 и не появлялись и т. Д. - но это также могло быть отчасти из -за моего CSS. Кому -то, кто испытывает проблемы с этим, вообще не появляется в т.е. Проверьте стандартный т.е. z-index Исправляет: http://www.google.com/search?q=ie+z+index+Issues

Последнее обновление: добавить вещи, которые следует учитывать при реализации таких плагинов:

• Количество элементов и тип контента для прокрутки. Я нашел номер, который начнет сжиматься, как только у вас будет больше 15 изображений для прокрутки.
• Я нашел ряд этих плагинов, которые были связаны со старыми версиями jQuery
• Если прокрутки изображений-это все одинаковый размер снова, ряд плагинов, с которыми я экспериментировал только с работой, только если бы все изображения были одинаковым размером, но не давали это ясно в учебных пособиях. Я полагаю, что тогда плагины запускаются, затем устанавливают строку тегов LI, которые все шириной x, а затем рассчитайте общее расстояние их все, чтобы управлять прокруткой.
• Эффекты - некоторые будут постоянно прокручивать другие перемещать одну паузу на секунду, а затем переместят другое изображение

Теперь я также обнаружил, что эти два плагина Scroller также очень хороши.

http://caroufredsel.frebsite.nl/

http://sorgalla.com/jcarousel/

Answer 2

Шелковистый гладкий марки jquery а также Шатер Giva Labs '

Answer 3

Просто мысль. Не могли бы вы сделать что -то подобное.

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

и HTML

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