Heim >Web-Frontend >js-Tutorial >jquery.gridrotator implementiert eine responsive Bildanzeigegalerie effect_jquery
jquery.gridrotator ist ein sehr praktisches responsives Galerie-Plug-in für die Bildanzeige. Dieses Plug-in für die Bildanzeigegalerie ordnet Bilder wie ein Raster an und dreht die Bilder dann zufällig in einem Raster um, um ein anderes Bild anzuzeigen. Insgesamt gibt es 6 Effekte.
HTML-Struktur:
HTML-Struktur ist sehr einfach.
<div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow"> <ul> <li><a href="#"><img src="images/medium/1.jpg" alt="Whatever works"/></a></li> <li><a href="#"><img src="images/medium/2.jpg" alt="Anything else"/></a></li> <!-- ... --> </ul> </div>
Anruf-Plug-in
$(function() { $( '#ri-grid' ).gridrotator(); });
Vergessen Sie nicht, die Dateien jQuery und jquery.gridrotator.js einzuführen.
Optionale Parameter
// number of rows rows : 4, // number of columns columns : 10, // rows/columns for different screen widths // i.e. w768 is for screens smaller than 768 pixels w1024 : { rows : 3, columns : 8 }, w768 : { rows : 3, columns : 7 }, w480 : { rows : 3, columns : 5 }, w320 : { rows : 2, columns : 4 }, w240 : { rows : 2, columns : 3 }, // step: number of items that are replaced at the same time // random || [some number] // note: for performance issues, the number should not be > options.maxStep step : 'random', maxStep : 3, // prevent user to click the items preventClick : true, // animation type // showHide || fadeInOut || slideLeft || // slideRight || slideTop || slideBottom || // rotateLeft || rotateRight || rotateTop || // rotateBottom || scale || rotate3d || // rotateLeftScale || rotateRightScale || // rotateTopScale || rotateBottomScale || random animType : 'random', // animation speed animSpeed : 500, // animation easings animEasingOut : 'linear', animEasingIn : 'linear', // the item(s) will be replaced every 3 seconds // note: for performance issues, the time "can't" be < 300 ms interval : 3000, // if false the animations will not start // use false if onhover is true for example slideshow : true, // if true the items will switch when hovered onhover : false, // ids of elements that shouldn't change nochange : []
Wenn Sie die Rastergröße festlegen, sollten Sie beachten, dass nicht alle Bilder auf einmal im Raster angezeigt werden. Wenn Sie beispielsweise 50 Bilder haben und 4 Zeilen und 5 Spalten definieren, werden 20 Bilder im Raster angezeigt und die anderen 30 Bilder werden zum Spiegeln und Wechseln von Bildern verwendet.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.