Slideshow JavaScript/HTML semplice

Question

Nuovo per Javascript, ma dopo alcune ricerche sembra che questo sarebbe il metodo migliore per implementare l'output desiderato. Sto provando a produrre una presentazione di immagini (5 immagini preselezionate) che cambia automaticamente tra intervalli di 5 secondi. Qualcuno può puntare a un tutorial o guidarmi in questo processo? Qualsiasi aiuto è molto apprezzato.

Answer 1

Un bel plugin di tipo slideshow jQuery è questo http://www.devtrix.net/sliderman/ Ha molte transizioni diverse tra le diapositive ed è davvero facile da usare.

Ci sono molti là fuori, quindi una rapida ricerca su google di "Slideshow jQuery" produrrà centinaia di risultati.

Answer 2

solo Google per cursori contenuto JavaScript

Ecco 350 immagini e di contenuti cursori:

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

ed ecco 25 più:

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

Answer 3

Ecco un codice molto semplice per creare semplice presentazione JavaScript/HTML solo utilizzando semplici codici JavaScript e HTML:

<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

ci sono migliaia di esempi, alcuni molto complessi e sofisticati. Il difficile, piuttosto, è trovarne uno facile da capire per i principianti.

Dopo alcune ricerche ho trovato questo da css-tricks. (Utilizza anche jquery).

Answer 5

So che questo è un vecchio post, ma per quanto mi piacerebbe condividere il mio tutorial, a beneficio di chiunque si imbattesse in questa domanda in futuro.

Simple Slideshow

Spero che questo aiuti qualcuno. È una presentazione piuttosto semplice e semplice che è facile da costruire/implementare.

nel caso in cui il link non è più valido ecco il codice: La prima fase è quello di impostare il codice HTML come segue:

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

Successivo scriveremo il CSS, che è la seguente:

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

Come potete vedere, non c'è niente di eccitante o complicato in questo CSS. In effetti non diventa più semplice, ma prometto che è tutto ciò che è necessario.

successivo creeremo il 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) }); 
} 

});