Comment construire simple image jquery slider avec effet de glissement ou d'opacité?

Question

Comment construire simple image jquery slider avec effet de glissement ou d'opacité?

certains d'entre nous pourraient ne pas vouloir utiliser les plugins prêts à cause de leur grande taille et de la possibilité de créer des conflits avec le javascript actuel.

j'utilisais des plugins slider légers avant mais quand le client donne des révisions modulaires, c'est devenu vraiment difficile à manipuler. Ensuite, j'ai l'intention de construire le mien pour le personnaliser facilement. Je pense que les sliders ne devraient pas être si complexes à construire depuis le début.

Qu'est-ce qu'un moyen simple et propre pour construire le slider image jQuery?

27

animation css javascript jquery slideshow

demandé sur Barlas Apaydin 2012-09-26 22:43:32

5 réponses

score 62 · Answer 1

avant d'examiner les exemples, vous devriez connaître deux fonctions jQuery que j'ai utilisées le plus souvent.

index () renvoie une 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 de l'indice).

Bref je prends déclencheur sélectionné l'élément index value et faites correspondre cette valeur sur les images avec eq méthode.

- FadeIn / FadeOut effet.

- glisser effet.

substitution la roulette de la souris réponse.

exemple de code 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 truc: superposition des images avec la position: absolute

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 DE GLISSEMENT: jsFiddle.

css truc: avec double enveloppe et l'utilisation des enfants en tant que 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');
}

Commune jQuery réponse pour les deux curseur:

( déclencheurs + suivant/précédent et cliquez sur 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);
}

score 17 · Answer 2

voici un code simple et facile à comprendre pour créer le diaporama 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" />

score 0 · Answer 3

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

});

score 0 · Answer 4

j'ai récemment créé une solution avec une galerie d'images et un curseur qui apears lorsqu'une image est cliquée.

jetez un coup d'oeil au code ici: GitHub

Et en direct un exemple 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>

score 0 · Answer 5

vérifiez tout ce tas de code pour construire un simple slider image jquery. Copiez et sauvegardez ce fichier sur la machine locale et testez-le. Vous pouvez le modifier en fonction de votre exigence.

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

Las etiquetas más populares

Comment construire simple image jquery slider avec effet de glissement ou d'opacité?

5 réponses

EFFET D'OPACITÉ: jsFiddle.

EFFET DE GLISSEMENT: jsFiddle.

Commune jQuery réponse pour les deux curseur: