Come build un semplice cursore di immagini jQuery con effetto scorrevole o opacità?

Alcuni di noi potrebbero non desiderare utilizzare i plugin pronti a causa delle loro size elevate e la possibilità di creare conflitti con JavaScript correnti.

Prima di utilizzare plugin leggeri di scorrimento, ma quando il cliente fornisce revisioni modulari, è diventato veramente difficile manipolare. Poi ho lo scopo di build la mia per la personalizzazione facilmente. Credo che i cursori non dovrebbero essere così complessi da build dall'inizio.

Che cosa è un modo semplice e pulito per build jQuery slider di immagini?

Prima di esaminare esempi, dovresti conoscere due funzioni jQuery che ho usato di più.

indice () restituisce valore è un integer che indica la posizione del primo elemento all'interno dell'object jQuery relativo ai suoi elementi di fratello.

eq () seleziona un elemento basato sulla sua posizione (valore dell'indice).

In linea di principio prendo il index value dell'elemento di scatto selezionato e corrispondo a questo valore alle immagini con il metodo eq .

– effetto FadeIn / FadeOut .

– effetto scorrevole .

– risposta alternativa della ruota .


Campione 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> 

EFFETTO OPZIONALE: jsFiddle.

css trucco: sovrapposizioni immagini con posizione: assoluto

 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'); } 

EFFETTO SCORRENTE : jsFiddle.

css trucco: con doppio wrapper e uso bambino come maschera

 .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'); } 

Risposta comune jQuery per entrambi i cursori:

( trigger + prossimo / prev clic e timing )

 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); } 

Ecco un codice semplice e facile da comprendere per la creazione di slideshow di immagini utilizzando JavaScript senza utilizzare 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" /> 

Ho scritto un tutorial sulla creazione di una presentazione, La pagina del tutorial Nel caso in cui il collegamento diventa non valido ho incluso il codice nella mia risposta qui sotto.

l'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) }); } }); 

Recentemente ho creato una soluzione con una galleria di immagini e un cursore che appare quando si fa clic su un'image.

Date un'occhiata al codice qui: Codice GitHub

E qui un esempio vivo: Esempio di codice

 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('&times;') ).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('&#9668;') ).append($(document.createElement('button')).attr({ 'class': 'next-button', 'type': 'button' }).html('&#9658;') ) ); 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>