web-dev-qa-db-fra.com

Comment construire un curseur d'image jQuery simple avec un effet de glissement ou d'opacité?

Certains d'entre nous ne voudront peut-être pas utiliser des plugins prêts en raison de leur taille élevée et de la possibilité de créer des conflits avec le javascript actuel.

J'utilisais auparavant des plugins Light Slider, mais lorsque le client donne une révision modulaire, il est devenu très difficile à manipuler. Ensuite, je vise à construire le mien pour le personnaliser facilement. Je pense que les curseurs ne devraient pas être aussi complexes à construire depuis le début.

Quel est un moyen simple et propre de créer un curseur d'image jQuery?

javascriptjquerycssanimationslideshow
29
Barlas Apaydin

Avant d'inspecter les exemples, vous devez connaître deux fonctions jQuery que j'ai le plus utilisées.

index () renvoie la valeur est un entier indiquant la position du premier élément dans l'objet jQuery par rapport à ses éléments frères.

eq () sélectionne un élément en fonction de sa position (valeur d'index).

Fondamentalement, je prends l'élément de déclenchement sélectionné index value et faire correspondre cette valeur aux images avec la méthode eq.

- Effet FadeIn/FadeOut .

- Effet coulissant .

- alternative Réponse de la molette 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.

astuce css: images qui se chevauchent avec la 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.

astuce css: avec double wrapper et utiliser 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 aux deux curseurs:

( déclencheurs + clic suivant/précédent et 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);
}
64
Barlas Apaydin

Voici un code simple et facile à comprendre pour créer un diaporama d'images 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" />
18
shuseel

J'ai récemment créé une solution avec une galerie d'images et un curseur qui apparaît quand on clique sur une image.

Jetez un œil 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('&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>
2
q81

Découvrez tout ce tas de code pour construire un simple curseur d'image jquery. Copiez et enregistrez ce fichier sur la machine locale et testez-le. Vous pouvez le modifier selon vos besoins.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
  var current_img = 1;
  var i;

  $(document).ready(function(){
    var imgs = $("#image").find("img");

    function show_img(){
      for (i = 1; i < imgs.length+1; i++) {
        if(i == current_img){
          $(imgs[i-1]).show();
        }else{
          $(imgs[i-1]).hide()
        }
      }
    }

    $("#prev").click(function(){
      if(current_img == 1){
        current_img = imgs.length;
      }else{
        current_img = current_img - 1
      }
      show_img();
    });

    $("#next").click(function(){
      if(current_img == imgs.length){
        current_img = 1;
      }else{
        current_img = current_img + 1
      }
      show_img();
    });

  });

</script>
</head>
<body>

<div style="margin-top: 100px;"></div>
<div class="container">
  <div class="col-sm-3">
    <button type="button" id="prev" class="btn">Previous</button>
  </div>

  <div class="col-sm-6">
    <div id="image">
      <img src="https://www.w3schools.com/html/pulpitrock.jpg" alt="image1">
      <img src="https://www.w3schools.com/cSS/img_forest.jpg" alt="image2" hidden="true" style="max-width: 500px;">
      <img src="https://www.w3schools.com/html/img_chania.jpg" alt="image3" hidden="true">
    </div>
  </div>

  <div class="col-sm-3">
    <button type="button" id="next" class="btn">Next</button>
  </div>
</div>

</body>
</html>
2
V K Singh

J'ai écrit un tutoriel sur la création d'un diaporama, La page du tutoriel Au cas où le lien deviendrait 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) });
 }

});
1
M_Griffiths