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

Ответ 1

Просто нашел это - jQuery-driven и имеет изображения. Im намереваясь использовать его для текущего проекта.

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

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

УКАЗЫВАЙТЕ, что он вонял хаос с проблемами z-index в IE 6/7 и не появлялся и т.д. - Но это также могло быть частично связано с моим CSS. Для тех, у кого проблемы с этим не появляются вообще в IE, проверьте стандартные IE z-index исправления: http://www.google.com/search?q=ie+z+index+issues

ПОСЛЕДНЕЕ ОБНОВЛЕНИЕ: Добавление вещей, которые следует учитывать при внедрении таких плагинов:

• Количество элементов и тип содержимого для прокрутки. Я нашел номер, который начнет сбой, как только у вас будет более 15 изображений для прокрутки.
• Я нашел несколько таких плагинов, которые были привязаны к старым версиям jquery
• Если прокрутка изображений снова ОЧЕНЬ ОДИН РАЗ РАЗМЕРА, несколько модулей, которые я экспериментировал, только работали, если все изображения были одинакового размера, но в этом уроке не было ясно. Я верю, что тогда плагины запускают, а затем устанавливают строку тегов li, которые имеют все ширину x, а затем вычисляют общее расстояние между ними, все соединенные вместе, чтобы управлять прокруткой.
• Эффекты - некоторые из них будут непрерывно прокручивать, другие перемещают одну паузу изображения на секунду, а затем перемещают другое изображение.

Я также нашел, что эти два скроллерных плагина тоже очень хороши.

http://caroufredsel.frebsite.nl/

http://sorgalla.com/jcarousel/

Ответ 2

Шаблон синего цвета Smooth-Smooth и Marquee Giva Labs

Ответ 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>