Simple JavaScript/HTML Slideshow

Question

Nuevo en Javascript, pero después de algunas investigaciones, este parece ser el mejor método para implementar mi salida deseada. Estoy tratando de producir una presentación de diapositivas de imágenes (5 imágenes preseleccionadas) que cambian automáticamente entre intervalos de 5 segundos. ¿Alguien puede apuntar hacia un tutorial o guiarme en este proceso? Cualquier ayuda es muy apreciada.

Answer 1

Un plugin tipo de presentación de diapositivas de jQuery realmente bueno es este http://www.devtrix.net/sliderman/ Tiene muchas transiciones diferentes entre diapositivas, y es realmente fácil de usar.

Hay muchos por ahí, por lo que una búsqueda rápida en Google de "jQuery Slideshow" producirá cientos de resultados.

Answer 2

sólo Google para deslizadores de contenido javascript

Aquí hay 350 imágenes y contenido deslizadores:

http://www.jqueryrain.com/example/jquery-slider-slideshow/

y aquí es 25 más:

http://vandelaydesign.com/blog/web-development/jquery-image-galleries/.

Answer 3

Aquí es un código muy simple de crear simples diapositivas JavaScript/HTML sólo mediante el uso de códigos JavaScript y HTML simples:

<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" /> 

Answer 4

Hay miles de ejemplos, algunos muy complejos y sofisticados. La dificultad, más bien, es encontrar una fácil de entender para los principiantes.

Después de algunas investigaciones, he encontrado esto en css-tricks. (Utiliza jquery también).

Answer 5

Sé que esta es una publicación anterior, pero pensé que compartiría mi tutorial, para el beneficio de cualquier persona que se encuentre con esta pregunta en el futuro.

Simple Slideshow

Espero que esto ayude a alguien. Es una presentación de diapositivas bastante simple y básica que es fácil de construir/implementar.

por si acaso el enlace deja de ser válida aquí es el código: La primera etapa consiste en establecer el html de la siguiente manera:

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

A continuación vamos a escribir el CSS, el cual es el siguiente:

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

Como puede ver, no hay nada emocionante o complicado sobre este CSS. De hecho, no es más básico, pero prometo que es todo lo que se necesita.

A continuación vamos a crear el 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) }); 
} 

});