JavaScript или jQuery image карусель / киносъемка - PullRequest
Новая
       5

JavaScript или jQuery image карусель / киносъемка

0 голосов
/ 25 августа 2010

Я ищу какой-нибудь нативный плагин JavaScript или jQuery, соответствующий следующей спецификации.

  • Последовательно перемещается по набору изображений (ul / li)
  • Непрерывное движение, без пейджинга
  • Появляется бесконечным, плавно перезапускается в начале
  • Возможность паузы при наведении
  • Не требует дополнительных плагинов или их минимальное количество

Я понимаю, это звучит достаточно просто. Но я просмотрел сеть и попробовал Cycle и jCarousel / Lite без удачи. Я чувствую, что кто-то должен существовать и хотел поставить вопрос перед тем, как написать свой.

Любое направление ценится. Спасибо.

Ответы [ 3 ]

0 голосов
/ 25 августа 2010

Это можно сделать с помощью обходного плагина jQuery.

http://fredhq.com/projects/roundabout/

Возможно, потребуется другой плагин.

0 голосов
/ 10 сентября 2010

Оба ответа MoDFoX и GSto хороши. Обычно я использовал бы один из них, но эти плагины не отвечали всем требованиям. В конце концов, это было довольно просто, поэтому я просто написал свой собственный. Я включил JavaScript ниже. По сути, он клонирует элемент на странице, предположительно ul, и добавляет его в родительский контейнер. Это позволяет осуществлять непрерывную прокрутку справа налево, перемещая элемент влево и добавляя его один раз за пределы поля зрения. Конечно, вам может понадобиться настроить этот код в зависимости от вашего CSS. 

// global to store interval reference
var slider_interval = null;
var slider_width = 0;
var overflow = 0;

prepare_slider = function() { 
 var container = $('.sliderGallery');

 if (container.length == 0) {
  // no gallery
  return false;
 }

 // add hover event to pause slider
 container.hover(function() {clearInterval(slider_interval);}, function() {slider_interval = setInterval("slideleft()", 30);});

 // set container styles since we are absolutely positioning elements
 var ul = container.children('ul');
 container.css('height', ul.outerHeight(true) + 'px');
 container.css('overflow', 'hidden')

 // set width and overflow of slider
 slider_width = ul.width();
 overflow = -1 * (slider_width + 10); 

 // set first slider attributes
 ul.attr('id', 'slider1');
 ul.css({"position": "absolute", "left": 0, "top": 0}); 

 // clone second slider
 var ul_copy = ul.clone();

 // set second slider attributes
 ul.attr('id', 'slider2');
 ul_copy.css("left", slider_width + "px");

 container.append(ul_copy);

 // start time interval
 slider_interval = setInterval("slideleft()", 30);
}

function slideleft() {
 var copyspeed = 1;
 var slider1 = $('#slider1');
 var slider2 = $('#slider2');

 slider1_position = parseInt(slider1.css('left'));
 slider2_position = parseInt(slider2.css('left'));

 // cross fade the sliders
 if (slider1_position > overflow) {
  slider1.css("left", (slider1_position - copyspeed) + "px");
 }
 else {
  slider1.css("left", (slider2_position + slider_width) + "px");
 }

 if (slider2_position > overflow) {
  slider2.css("left", (slider2_position - copyspeed) + "px");
 }
 else {
  slider2.css("left", (slider1_position + slider_width) + "px");
 }
}
0 голосов
/ 25 августа 2010

вы должны проверить Nivo Slider , я думаю, что с правильной конфигурацией вы можете сделать то, что вы хотите.

...