jQuery Girl
  1. jQuery Girl
  3. JQuery: déplacer automatiquement une barre de défilement vers un emplacement spécifique après un temps déterminé
Intereting Posts
Changer la couleur de fond des jours dans FullCalendar Supprimer l’en-tête de jqgrid Jquery: Afficher / masquer le menu avec un seul bouton JQuery Ajax Form et éléments de formulaire créés dynamicment non soumis Vérifier si l’accélération matérielle a été activée pour une animation CSS? événement ondrop – créer un nouvel élément HighCharts exception non capturée Comment append un bouton de sauvegarde ajax avec le chargement de gif dans CKeditor 4.2.1. Ajout de données à jQuery-Flexigrid sans ajax-demande cliquez sur animer la barre de titre vers le haut, un panneau ouvert dans la diapositive, comment puis-je cliquer à nouveau pour animer la barre surélevée et fermer le panneau? jqGrid cellattr title ignore le texte après les espaces Est-il possible de déterminer si une sélection HTML est actuellement ouverte? Le stockage local est-il persistant? Comment utiliser jqXHR avec Jquery Lire XML et append en vue à l’aide de Backbone js

JQuery: déplacer automatiquement une barre de défilement vers un emplacement spécifique après un temps déterminé

Voici mon JsFiddle

Comment puis-je déplacer ma barre de défilement automatiquement vers la droite (après la troisième image) avec un effet de fondu après quelques secondes afin que l’utilisateur puisse voir la prochaine série d’images?

quelqu’un peut-il me dire comment cela peut être fait en utilisant javascript et jquery.

Voici mon HTML

Voici mon css: 

 .gallery .row { white-space: nowrap; } .gallery img { display: inline-block; /* other properties */ }

Voici une version simplifiée de jQuery: 

 $(document).ready(function() { setInterval(function() { var A = $('.gallery').scrollLeft(); if (A < 993) { $('.gallery').animate({ scrollLeft: '+=331px' }, 300); } if (A >= 993) { $('.gallery').delay(400).animate({ scrollLeft: 0 }, 300); } }, 3000); }); 
 .gallery { background-color: #abcdef; width: 350px; height: 265px; overflow-x: scroll; } .gallery .row { white-space: nowrap; } .gallery img { display: inline-block; margin-left: 20px; margin-top: 20px; } .normalimage { height: 80px; width: 50px; border: 5px solid black; } .wideimage { height: 80px; width: 130px; border: 5px solid black; } img:last-of-type { margin-right: 20px; /* margin on last image */ }

Déplacer la barre de défilement ne vous donnera pas des résultats optimaux en termes de performances.

Cependant, pour répondre à votre question: 

 var Slider = { incr: 3, //everytime go to 3rd image from current imageNumber: 0, //this keeps track of index of image to go to intervalDuration: 3000, //interval between each scroll imageMargin: 20, //margin that you set between images nextImage: null, //next image object, keeps updating, updateNextImage: function(){ $(Slider.nextImage).removeClass('next'); Slider.imageNumber += Slider.incr; $('.row:first img:nth-child(' + Slider.imageNumber + ')').addClass('next'); Slider.nextImage = $('img.next'); } } $(document).ready(function(){ //set next item first Slider.updateNextImage(); setInterval(function(){ try{ $('.gallery').animate( { scrollLeft: $(Slider.nextImage).position().left + $('.gallery').scrollLeft() + $(Slider.nextImage).outerWidth() + Slider.imageMargin }, //Scrolls to the element 300, function(){ //update next item Slider.updateNextImage(); }); } catch(e){ //code to restart slider Slider.imageNumber = 0; $('.gallery').animate({scrollLeft: 0}); Slider.updateNextImage(); } }, Slider.intervalDuration); });

Pour plus de contrôle, un codage plus propre et de nombreuses autres formes de curseurs, je suggère un plugin jQuery existant pour y parvenir: http://www.woothemes.com/flexslider/

Bonne chance.

Je n’ai pas vraiment compris ce que tu voulais dire par:

“avec un effet de fondu”

Mais voici un “slider” qui permet de sauter 3 classes à la fois: 

 var left = $('.normalimage:nth-child(3)').offset().left-$('.gallery').offset().left; var max = $('.gallery').width(); var step = left; setInterval( function(){ $('.gallery').animate({ scrollLeft:step, } ,300); if(max>= step) step += left; else step = 0; }, 2000 );

Démo ici

Travailler jsFiddle Demo 

 $(function () { // show 3 elements in each row var count = 3; function showItems(start) { if (start >= $('.gallery .row:eq(0) img').length) { start = 0; } // for debug console.log('Showing items ' + start + ' - ' + (start + count)); $('.gallery .row img').css('display', 'none'); $('.gallery .row').each(function () { var $row = $(this); for (var i = start; i < count + start; i++) { $row.find('img').eq(i) .css('opacity', 0) .css('display', 'inline-block') .animate({opacity: 1}); } }); setTimeout(function () { showItems(count + start); }, 1000); } showItems(0); });