Intereting Posts
Comment utiliser jQuery pour empêcher la clé espace d'entrer dans un espace?
Comment utiliser un tuyau dans un composant dans Angular 2?
AnythingSlider: images du centre, même sur une résolution à faible écran
Javascript ou JQuery obtient le contenu html du site externe
SVG ne génère pas de polices dans Firefox (fonctionne dans IE9 et Chrome)
Comment passer un paramètre à un javascript via une URL et l'afficher sur une page?
Quel est un bon outil de débogage Javascript?
Chrome ne supprime pas les cookies de session
Requirejs – Configuration requise avant chargement des données principales
AngularJS: est $$ hashkey une clé fiable
Ajax appel de Bookmarklet
Pourquoi est-il nécessaire d'utiliser bind lorsque vous travaillez avec ES6 et ReactJS?
Javascript: solution de rechange nécessaire: Internet Explorer modifie le texte du lien lors de la modification de l'href
Sans jquery, je dois savoir si la souris est au-dessus d'un élément, ne pas déterminer quand il devient trop (dans le cas où il ne se déplace pas pour déclencher onmouseover)
Graphique dirigé – niveau CSS de niveau nœud
Comment créer un curseur d'image jQuery simple avec un effet de glissement ou d'opacité?
Certains d'entre nous pourraient ne pas vouloir utiliser des plugins prêts à cause de leur taille élevée et de créer des conflits avec les javascript actuels.
J'utilisais des plugins slider légers avant, mais lorsque le client donne une révision modulaire, il est devenu très difficile à manipuler. Ensuite, je vise à construire le mien pour la personnaliser facilement. Je crois que les curseurs ne devraient pas être complexes à construire depuis le début.
Qu'est-ce qu'un moyen simple et propre de créer un curseur d'image jQuery?
Avant d'inspecter les exemples, vous devez connaître deux fonctions jQuery que j'ai le plus utilisées.
La valeur de retour d' index () est un nombre entier indiquant la position du premier élément dans l'objet jQuery par rapport à ses éléments de fratrie.
Eq () sélectionne un élément en fonction de sa position (valeur d'index).
En principe, je prends la index value l'élément de déclenchement sélectionné et je correspond à cette valeur sur les images avec la méthode eq .
– Effet FadeIn / FadeOut .
– Effet coulissant .
– réponse alternative de la souris .
Exemple html:
<ul class="images"> <li> <img src="images/1.jpg" alt="1" /> </li> <li> <img src="images/2.jpg" alt="2" /> </li> ... </ul> <ul class="triggers"> <li>1</li> <li>2</li> ... </ul> <span class="control prev">Prev</span> <span class="control next">Next</span>
EFFET D'OPACITÉ: jsFiddle.
Css trick: superposition d'images avec position: absolue
ul.images { position:relative; } ul.images li { position:absolute; }
JQuery:
var target; var triggers = $('ul.triggers li'); var images = $('ul.images li'); var lastElem = triggers.length-1; triggers.first().addClass('active'); images.hide().first().show(); function sliderResponse(target) { images.fadeOut(300).eq(target).fadeIn(300); triggers.removeClass('active').eq(target).addClass('active'); }
EFFET COULISSANT: jsFiddle.
Css trick: avec double enveloppe et utilisez l'enfant comme masque
.mask { float:left; margin:40px; width:270px; height:266px; overflow:hidden; } ul.images { position:relative; top:0px;left:0px; } /* this width must be total of the images, it comes from jquery */ ul.images li { float:left; }
JQuery:
var target; var triggers = $('ul.triggers li'); var images = $('ul.images li'); var lastElem = triggers.length-1; var mask = $('.mask ul.images'); var imgWidth = images.width(); triggers.first().addClass('active'); mask.css('width', imgWidth*(lastElem+1) +'px'); function sliderResponse(target) { mask.stop(true,false).animate({'left':'-'+ imgWidth*target +'px'},300); triggers.removeClass('active').eq(target).addClass('active'); }
Réponse jQuery commune pour les deux curseurs:
( Déclenche + clic / calendrier suivant et calendrier )
triggers.click(function() { if ( !$(this).hasClass('active') ) { target = $(this).index(); sliderResponse(target); resetTiming(); } }); $('.next').click(function() { target = $('ul.triggers li.active').index(); target === lastElem ? target = 0 : target = target+1; sliderResponse(target); resetTiming(); }); $('.prev').click(function() { target = $('ul.triggers li.active').index(); lastElem = triggers.length-1; target === 0 ? target = lastElem : target = target-1; sliderResponse(target); resetTiming(); }); function sliderTiming() { target = $('ul.triggers li.active').index(); target === lastElem ? target = 0 : target = target+1; sliderResponse(target); } var timingRun = setInterval(function() { sliderTiming(); },5000); function resetTiming() { clearInterval(timingRun); timingRun = setInterval(function() { sliderTiming(); },5000); }
Voici un code simple et facile à comprendre pour Créer un diaporama d'image en utilisant JavaScript sans utiliser Jquery.
<script language="JavaScript"> var i = 0; var path = new Array(); // LIST OF IMAGES path[0] = "image_1.gif"; path[1] = "image_2.gif"; path[2] = "image_3.gif"; function swapImage() { document.slide.src = path[i]; if(i < path.length - 1) i++; else i = 0; setTimeout("swapImage()",3000); } window.onload=swapImage; </script> <img height="200" name="slide" src="image_1.gif" width="400" />
J'ai écrit un didacticiel sur la création d'un diaporama, La page du didacticiel Si le lien devient invalide, j'ai inclus le code dans ma réponse ci-dessous.
Le html:
<div id="slideShow"> <div id="slideShowWindow"> <div class="slide"> <img src="”img1.png”/"> <div class="slideText"> <h2>The Slide Title</h2> <p>This is the slide text</p> </div> <!-- </slideText> --> </div> <!-- </slide> repeat as many times as needed --> </div> <!-- </slideShowWindow> --> </div> <!-- </slideshow> -->
Css:
img { display: block; width: 100%; height: auto; } p{ background:none; color:#ffffff; } #slideShow #slideShowWindow { width: 650px; height: 450px; margin: 0; padding: 0; position: relative; overflow:hidden; margin-left: auto; margin-right:auto; } #slideShow #slideShowWindow .slide { margin: 0; padding: 0; width: 650px; height: 450px; float: left; position: relative; margin-left:auto; margin-right: auto; } #slideshow #slideshowWindow .slide, .slideText { position:absolute; bottom:18px; left:0; width:100%; height:auto; margin:0; padding:0; color:#ffffff; font-family:Myriad Pro, Arial, Helvetica, sans-serif; } .slideText { background: rgba(128, 128, 128, 0.49); } #slideshow #slideshowWindow .slide .slideText h2, #slideshow #slideshowWindow .slide .slideText p { margin:10px; padding:15px; } .slideNav { display: block; text-indent: -10000px; position: absolute; cursor: pointer; } #leftNav { left: 0; bottom: 0; width: 48px; height: 48px; background-image: url("../Images/plus_add_minus.png"); background-repeat: no-repeat; z-index: 10; } #rightNav { right: 0; bottom: 0; width: 48px; height: 48px; background-image: url("../Images/plus_add_green.png"); background-repeat: no-repeat; z-index: 10; }
JQuery:
$(document).ready(function () { var currentPosition = 0; var slideWidth = 650; var slides = $('.slide'); var numberOfSlides = slides.length; var slideShowInterval; var speed = 3000; //Assign a timer, so it will run periodically slideShowInterval = setInterval(changePosition, speed); slides.wrapAll('<div id="slidesHolder"></div>'); slides.css({ 'float': 'left' }); //set #slidesHolder width equal to the total width of all the slides $('#slidesHolder').css('width', slideWidth * numberOfSlides); $('#slideShowWindow') .prepend('<span class="slideNav" id="leftNav">Move Left</span>') .append('<span class="slideNav" id="rightNav">Move Right</span>'); manageNav(currentPosition); //tell the buttons what to do when clicked $('.slideNav').bind('click', function () { //determine new position currentPosition = ($(this).attr('id') === 'rightNav') ? currentPosition + 1 : currentPosition - 1; //hide/show controls manageNav(currentPosition); clearInterval(slideShowInterval); slideShowInterval = setInterval(changePosition, speed); moveSlide(); }); function manageNav(position) { //hide left arrow if position is first slide if (position === 0) { $('#leftNav').hide(); } else { $('#leftNav').show(); } //hide right arrow is slide position is last slide if (position === numberOfSlides - 1) { $('#rightNav').hide(); } else { $('#rightNav').show(); } } //changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked function changePosition() { if (currentPosition === numberOfSlides - 1) { currentPosition = 0; manageNav(currentPosition); } else { currentPosition++; manageNav(currentPosition); } moveSlide(); } //moveSlide: this function moves the slide function moveSlide() { $('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) }); } });
J'ai récemment créé une solution avec une galerie d'images et un curseur qui s'affiche lorsqu'une image est cliquée.
Jetez un oeil au code ici: Code GitHub
Et un exemple en direct ici: Exemple de code
var CreateGallery = function(parameters) { var self = this; this.galleryImages = []; this.galleryImagesSrcs = []; this.galleryImagesNum = 0; this.counter; this.galleryTitle = parameters.galleryTitle != undefined ? parameters.galleryTitle : 'Gallery image'; this.maxMobileWidth = parameters.maxMobileWidth != undefined ? parameters.maxMobileWidth : 768; this.numMobileImg = parameters.numMobileImg != undefined ? parameters.numMobileImg : 2; this.maxTabletWidth = parameters.maxTabletWidth != undefined ? parameters.maxTabletWidth : 1024; this.numTabletImg = parameters.numTabletImg != undefined ? parameters.numTabletImg : 3; this.addModalGallery = function(gallerySelf = self){ var $div = $(document.createElement('div')).attr({ 'id': 'modal-gallery' }).append($(document.createElement('div')).attr({ 'class': 'header' }).append($(document.createElement('button')).attr({ 'class': 'close-button', 'type': 'button' }).html('×') ).append($(document.createElement('h2')).text(gallerySelf.galleryTitle)) ).append($(document.createElement('div')).attr({ 'class': 'text-center' }).append($(document.createElement('img')).attr({ 'id': 'gallery-img' }) ).append($(document.createElement('button')).attr({ 'class': 'prev-button', 'type': 'button' }).html('◄') ).append($(document.createElement('button')).attr({ 'class': 'next-button', 'type': 'button' }).html('►') ) ); parameters.element.after($div); }; $(document).on('click', 'button.prev-button', {self: self}, function() { var $currImg = self.counter >= 1 ? self.galleryImages[--self.counter] : self.galleryImages[self.counter]; var $currHash = self.galleryImagesSrcs[self.counter]; var $src = $currImg.src; window.location.hash = $currHash; $('img#gallery-img').attr('src', $src); $('div#modal-gallery h2').text(self.galleryTitle + ' ' + (self.counter + 1)); }); $(document).on('click', 'button.next-button', {self: self}, function() { var $currImg = self.counter < (self.galleryImagesNum - 1) ? self.galleryImages[++self.counter] : self.galleryImages[self.counter]; var $currHash = self.galleryImagesSrcs[self.counter]; var $src = $currImg.src; window.location.hash = $currHash; $('img#gallery-img').attr('src', $src); $('div#modal-gallery h2').text(self.galleryTitle + ' ' + (self.counter + 1)); }); $(document).on('click', 'div#modal-gallery button.close-button', function() { $('#modal-gallery').css('position', 'relative'); $('#modal-gallery').hide(); $('body').css('overflow', 'visible'); }); parameters.element.find('a').on('click', {self: self}, function(event) { event.preventDefault(); $('#modal-gallery').css('position', 'fixed'); $('#modal-gallery').show(); $('body').css('overflow', 'hidden'); var $currHash = this.hash.substr(1); self.counter = self.galleryImagesSrcs.indexOf($currHash); var $src = $currHash; window.location.hash = $currHash; $('img#gallery-img').attr('src', $src); $('div#modal-gallery h2').text(self.galleryTitle + ' ' + (self.counter + 1)); }); this.sizeGallery = function(gallerySelf = self) { var $modalGallery = $(document).find("div#modal-gallery"); if($modalGallery.length <= 0) { this.addModalGallery(); } var $windowWidth = $(window).width(); var $parentWidth = parameters.element.width(); var $thumbnailHref = parameters.element.find('img:first').attr('src'); if($windowWidth < gallerySelf.maxMobileWidth) { var percentMobile = Math.floor(100 / gallerySelf.numMobileImg); var emMobile = 0; var pxMobile = 2; // var emMobile = gallerySelf.numMobileImg * 0.4; // var pxMobile = gallerySelf.numMobileImg * 2; parameters.element.find('img').css('width', 'calc('+percentMobile+'% - '+emMobile+'em - '+pxMobile+'px)'); } else if($windowWidth < gallerySelf.maxTabletWidth) { var percentTablet = Math.floor(100 / gallerySelf.numTabletImg); var emTablet = 0; var pxTablet = 2; // var emTablet = gallerySelf.numMobileImg * 0.4; // var pxTablet = gallerySelf.numMobileImg * 2; parameters.element.find('img').css('width', 'calc('+percentTablet+'% - '+emTablet+'em - '+pxTablet+'px)'); } else { var $thumbImg = new Image(); $thumbImg.src = $thumbnailHref; $thumbImg.onload = function() { var $thumbnailWidth = this.width; if($parentWidth > 0 && $thumbnailWidth > 0) { parameters.element.find('img').css('width', (Math.ceil($thumbnailWidth * 100 / $parentWidth))+'%'); } }; } }; this.startGallery = function(gallerySelf = self) { parameters.element.find('a').each(function(index, el) { var $currHash = el.hash.substr(1); var $img = new Image(); $img.src = $currHash; gallerySelf.galleryImages.push($img); gallerySelf.galleryImagesSrcs.push($currHash); }); this.galleryImagesNum = this.galleryImages.length; }; this.sizeGallery(); this.startGallery(); }; var myGallery; $(window).on('load', function() { myGallery = new CreateGallery({ element: $('#div-gallery'), maxMobileWidth: 768, numMobileImg: 2, maxTabletWidth: 1024, numTabletImg: 3 }); }); $(window).on('resize', function() { myGallery.sizeGallery(); });
#div-gallery { text-align: center; } #div-gallery img { margin-right: auto; margin-left: auto; } div#modal-gallery { top: 0; left: 0; width: 100%; max-width: none; height: 100vh; min-height: 100vh; margin-left: 0; border: 0; border-radius: 0; z-index: 1006; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: none; background-color: #fefefe; position: relative; margin-right: auto; overflow-y: auto; padding: 0; } div#modal-gallery div.header { position: relative; } div#modal-gallery div.header h2 { margin-left: 1rem; } div#modal-gallery div.header button.close-button { position: absolute; top: calc(50% - 1em); right: 1rem; } div#modal-gallery img { display: block; max-width: 98%; max-height: calc(100vh - 5em); margin-right: auto; margin-left: auto; } div#modal-gallery div.text-center { position: relative; } button.close-button { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 20px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; color: #333; background-color: #fff; border-color: #ccc; } button.close-button:hover, button.close-button:focus { background-color: #ddd; } button.next-button:hover, button.prev-button:hover, button.next-button:focus, button.prev-button:focus { color: #fff; text-decoration: none; filter: alpha(opacity=90); outline: 0; opacity: .9; } button.next-button, button.prev-button { position: absolute; top: 0; bottom: 0; left: 0; width: 15%; font-size: 20px; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.6); background-color: rgba(0,0,0,0); filter: alpha(opacity=50); opacity: .5; border: none; } button.next-button { right: 0; left: auto; background-image: -webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%); background-image: -o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%); background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5))); background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); background-repeat: repeat-x; } button.prev-button { background-image: -webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%); background-image: -o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%); background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001))); background-image: linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); background-repeat: repeat-x; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="div-gallery"> <a href="#http://placehold.it/1024x1024/ff0000/000000?text=Gallery+image+1"><img src="http://placehold.it/300x300/ff0000/000000?text=Gallery+image+1" alt=""></a> <a href="#http://placehold.it/1024x1024/ff4000/000000?text=Gallery+image+2"><img src="http://placehold.it/300x300/ff4000/000000?text=Gallery+image+2" alt=""></a> <a href="#http://placehold.it/1024x1024/ff8000/000000?text=Gallery+image+3"><img src="http://placehold.it/300x300/ff8000/000000?text=Gallery+image+3" alt=""></a> <a href="#http://placehold.it/1024x1024/ffbf00/000000?text=Gallery+image+4"><img src="http://placehold.it/300x300/ffbf00/000000?text=Gallery+image+4" alt=""></a> <a href="#http://placehold.it/1024x1024/ffff00/000000?text=Gallery+image+5"><img src="http://placehold.it/300x300/ffff00/000000?text=Gallery+image+5" alt=""></a> <a href="#http://placehold.it/1024x1024/bfff00/000000?text=Gallery+image+6"><img src="http://placehold.it/300x300/bfff00/000000?text=Gallery+image+6" alt=""></a> <a href="#http://placehold.it/1024x1024/80ff00/000000?text=Gallery+image+7"><img src="http://placehold.it/300x300/80ff00/000000?text=Gallery+image+7" alt=""></a> <a href="#http://placehold.it/1024x1024/40ff00/000000?text=Gallery+image+8"><img src="http://placehold.it/300x300/40ff00/000000?text=Gallery+image+8" alt=""></a> <a href="#http://placehold.it/1024x1024/00ff00/000000?text=Gallery+image+9"><img src="http://placehold.it/300x300/00ff00/000000?text=Gallery+image+9" alt=""></a> <a href="#http://placehold.it/1024x1024/00ff40/000000?text=Gallery+image+10"><img src="http://placehold.it/300x300/00ff40/000000?text=Gallery+image+10" alt=""></a> <a href="#http://placehold.it/1024x1024/00ff80/000000?text=Gallery+image+11"><img src="http://placehold.it/300x300/00ff80/000000?text=Gallery+image+11" alt=""></a> <a href="#http://placehold.it/1024x1024/00ffbf/000000?text=Gallery+image+12"><img src="http://placehold.it/300x300/00ffbf/000000?text=Gallery+image+12" alt=""></a> <a href="#http://placehold.it/1024x1024/00ffff/000000?text=Gallery+image+13"><img src="http://placehold.it/300x300/00ffff/000000?text=Gallery+image+13" alt=""></a> <a href="#http://placehold.it/1024x1024/00bfff/000000?text=Gallery+image+14"><img src="http://placehold.it/300x300/00bfff/000000?text=Gallery+image+14" alt=""></a> <a href="#http://placehold.it/1024x1024/0080ff/000000?text=Gallery+image+15"><img src="http://placehold.it/300x300/0080ff/000000?text=Gallery+image+15" alt=""></a> <a href="#http://placehold.it/1024x1024/0040ff/000000?text=Gallery+image+16"><img src="http://placehold.it/300x300/0040ff/000000?text=Gallery+image+16" alt=""></a> </div>