javascript - imagenes - slider web ejemplos
¿Cómo construir un deslizador de imagen jQuery simple con efecto deslizante u opacidad? (5)
Es posible que algunos de nosotros no deseemos usar complementos listos debido a sus altos tamaños y la posibilidad de crear conflictos con el javascript actual.
Antes usaba complementos ligeros de control deslizante, pero cuando el cliente realiza la revisión modular, se volvió realmente difícil de manipular. Luego apunto a construir el mío para personalizarlo fácilmente. Creo que los controles deslizantes no deberían ser tan complejos de construir desde el principio.
¿Cuál es una forma simple y limpia de construir el control deslizante de imagen jQuery?
Antes de inspeccionar ejemplos, debe conocer dos funciones de jQuery que utilicé más.
index() returns value es un entero que indica la posición del primer elemento dentro del objeto jQuery relativo a sus elementos hermanos.
eq() selecciona un elemento en función de su posición (valor de índice).
Básicamente, tomo el index value del index value del elemento disparador seleccionado y hago coincidir este valor en las imágenes con el método eq .
- respuesta alterna de la rueda del mouse .
Muestra 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>
EFECTO DE OPACIDAD: jsFiddle.
truco css: superposición de imágenes con posición: absoluta
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'');
}
EFECTO DESLIZANTE : jsFiddle.
truco de CSS: con envoltura doble y uso de niño como máscara
.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'');
}
Respuesta común de jQuery para ambos deslizadores:
( disparadores + clic siguiente / anterior y cronometraje )
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);
}
Aquí hay un código simple y fácil de entender para crear presentaciones de diapositivas usando JavaScript sin usar 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" />
He escrito un tutorial sobre cómo crear una presentación de diapositivas, La página del tutorial En caso de que el enlace se vuelva inválido, he incluido el código en mi respuesta a continuación.
el 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) });
}
});
Recientemente, he creado una solución con una galería de imágenes y un control deslizante que aparece cuando se hace clic en una imagen.
Eche un vistazo al código aquí: Código GitHub
Y un ejemplo en vivo aquí: Ejemplo de código
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>
Revisa todo este conjunto de código para crear un control deslizante de imagen simple de jquery. Copie y guarde este archivo en la máquina local y pruébelo. Puedes modificarlo de acuerdo a tus requerimientos.
<!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>