l'image JavaScript ou jQuery carrousel / filmstrim

Question

Je cherche un peu de JavaScript natif, ou plugin jQuery, qui répond à la spécification suivante.

• séquentiellement se déplace sur un ensemble d'images (ul / li)
• mouvement continu, non pagination
• apparaît infini, redémarre de façon transparente au début
• Possibilité de faire une pause sur le vol stationnaire
• Ne nécessite aucun ou plug-ins supplémentaires minimum

Je sais que cela semble assez simple. Mais je l'ai regardé sur le web et essayé Cycle et jCarousel / Lite sans chance. Je me sens comme il faut exister et je voulais poser la question avant d'écrire mon propre.

Toute direction est appréciée. Merci.

Answer 1

Les deux réponses par MoDFoX et gsto sont bonnes. En général, je voudrais utiliser l'un de ces derniers, mais ces plug-ins ne répondent pas aux toutes les exigences. En fin de compte c'était assez basique, donc je viens d'écrire mon propre. J'ai inclus le code JavaScript ci-dessous. Essentiellement, il clone un élément sur la page, sans doute un ul et il ajoute au conteneur parent. Cet effet permet un défilement continu, de droite à gauche, en déplaçant l'élément gauche puis annexant une fois hors de la vue. Bien sûr, vous devrez peut-être modifier ce code en fonction de votre 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");
 }
}

Answer 2

vous devriez consulter Nivo curseur , je pense avec la bonne configuration, vous pouvez le faire ce que vous voulez.

Answer 3

Vous pouvez le faire avec le plug-in rond-point jQuery.

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

Il peut nécessiter un autre plug-in.