¿Dónde puedo encontrar un tutorial simple de diapositivas de imágenes jquery para principiantes desde cero (sin complementos) sin el botón de navegación hacia la izquierda y derecha?jquery simple tutorial de diapositivas de imágenes
gracias.
Este lookslike algo que estaría interesado en
http://www.designchemical.com/blog/index.php/jquery/jquery-image-swap-gallery/
Aquí está mi adaptación del tutorial de Michael Soriano. Consulte a continuación o en JSBin.
$(function() {
var theImage = $('ul#ss li img');
var theWidth = theImage.width();
//wrap into mother div
$('ul#ss').wrap('<div id="mother" />');
//assign height width and overflow hidden to mother
$('#mother').css({
width: function() {
return theWidth;
},
height: function() {
return theImage.height();
},
position: 'relative',
overflow: 'hidden'
});
//get total of image sizes and set as width for ul
var totalWidth = theImage.length * theWidth;
$('ul').css({
width: function() {
return totalWidth;
}
});
var ss_timer = setInterval(function() {
ss_next();
}, 3000);
function ss_next() {
var a = $(".active");
a.removeClass('active');
if (a.hasClass('last')) {
//last element -- loop
a.parent('ul').animate({
"margin-left": (0)
}, 1000);
a.siblings(":first").addClass('active');
} else {
a.parent('ul').animate({
"margin-left": (-(a.index() + 1) * theWidth)
}, 1000);
a.next().addClass('active');
}
}
// Cancel slideshow and move next manually on click
$('ul#ss li img').on('click', function() {
clearInterval(ss_timer);
ss_next();
});
});* {
margin: 0;
padding: 0;
}
#ss {
list-style: none;
}
#ss li {
float: left;
}
#ss img {
width: 200px;
height: 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="ss">
<li class="active">
<img src="http://leemark.github.io/better-simple-slideshow/demo/img/colorado-colors.jpg">
</li>
<li>
<img src="http://leemark.github.io/better-simple-slideshow/demo/img/monte-vista.jpg">
</li>
<li class="last">
<img src="http://leemark.github.io/better-simple-slideshow/demo/img/colorado.jpg">
</li>
</ul>Este es, de lejos, el ejemplo más fácil que he encontrado en la red. http://jonraasch.com/blog/a-simple-jquery-slideshow
Summaring el ejemplo, esto es lo que hay que hacer una presentación de diapositivas:
HTML:
<div id="slideshow">
<img src="img1.jpg" style="position:absolute;" class="active" />
<img src="img2.jpg" style="position:absolute;" />
<img src="img3.jpg" style="position:absolute;" />
</div>
posición absoluta se utiliza para poner cada imagen sobre la otra.
CSS
<style type="text/css">
.active{
z-index:99;
}
</style>
La imagen que tiene van a aparecer sobre los demás la clase = "activo", la clase = propiedad activa va a cambiar con el siguiente código deJquery.
<script>
function slideSwitch() {
var $active = $('div#slideshow IMG.active');
var $next = $active.next();
$next.addClass('active');
$active.removeClass('active');
}
$(function() {
setInterval("slideSwitch()", 5000);
});
</script>
Si quiere ir más allá con presentaciones de diapositivas le sugiero que tenga una mirada en el enlace de arriba (ver cambios oppacity animada - 2n ejemplo) o en otras presentaciones de diapositivas tutoriales más complejas.
Creo que hay una cierta progresión por parte de los codificadores donde comenzamos a descifrar cómo escribir un simple fade show, usando la técnica de capa superior/inferior, pero eventualmente nos damos cuenta de que lo que queremos es mover las imágenes de izquierda a derecha (o viceversa). – TARKUS
¡este es el ejemplo más simple y directo! gracias por tu ayuda hombre – NiCU
No sé por qué usted no ha marcado en una de estas respuestas gr8 ... aquí es otra opción que permitiría a cualquiera que visite y de controlar la velocidad de transición y tiempo de pausa
JavaScript
$(function() {
/* SET PARAMETERS */
var change_img_time = 5000;
var transition_speed = 100;
var simple_slideshow = $("#exampleSlider"),
listItems = simple_slideshow.children('li'),
listLen = listItems.length,
i = 0,
changeList = function() {
listItems.eq(i).fadeOut(transition_speed, function() {
i += 1;
if (i === listLen) {
i = 0;
}
listItems.eq(i).fadeIn(transition_speed);
});
};
listItems.not(':first').hide();
setInterval(changeList, change_img_time);
});
.
HTML
<ul id="exampleSlider">
<li><img src="http://placehold.it/500x250" alt="" /></li>
<li><img src="http://placehold.it/500x250" alt="" /></li>
<li><img src="http://placehold.it/500x250" alt="" /></li>
<li><img src="http://placehold.it/500x250" alt="" /></li>
</ul>
.
Si el mantenimiento de este simple que es fácil de mantener resposive mejor para visitar el: DEMO
.
Si desea algo con un FX de transición especial (todavía sensible) - mira esto DEMO WITH SPECIAL FX
¿Puede por favor publicar su jsfiddle? Intenté y la imagen salió de la página. – Si8
Agregado.Probablemente solo necesites actualizar tus elementos LI para 'flotar: izquierda;' – Justin