Prosty JavaScript/HTML Slideshow

Question

Nowość w JavaScript, ale po pewnych badaniach, taka lokalizacja byłaby najlepszą metodą realizacji pożądanych wyników. Próbuję utworzyć pokaz slajdów z obrazów (5 wstępnie wybranych obrazów), które automatycznie zmieniają się między 5-sekundowymi interwałami. Czy ktoś może wskazać na samouczek lub poprowadzić mnie w tym procesie? Wszelaka pomoc jest bardzo doceniana.

Answer 1

Naprawdę fajna wtyczka typu pokazu jQuery jest to http://www.devtrix.net/sliderman/ Ma wiele różnych przejść między slajdami i jest naprawdę łatwa w użyciu.

Jest ich wiele, więc szybkie wyszukiwanie google "jQuery Slideshow" da setki wyników.

Answer 2

Wystarczy google javascript treści suwaków

Oto 350 obrazów i treści suwaki:

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

i oto 25 więcej:

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

Answer 3

Tutaj jest bardzo prosty kod, aby utworzyć prosty pokaz slajdów JavaScript/HTML tylko za pomocą prostych kodów JavaScript i 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

Istnieją tysiące przykładów, niektóre bardzo złożone i wyrafinowane. Trudno jest raczej znaleźć łatwe do zrozumienia dla początkujących.

Po pewnych badaniach znalazłem to od css-tricks. (Używa również jquery).

Answer 5

Wiem, że to stary post, ale chciałem podzielić się moim tutorialem, z korzyścią dla każdego, kto przejdzie to pytanie w przyszłości.

Simple Slideshow

Nadzieja to pomaga kogoś. Jest to bardzo prosty i podstawowy pokaz slajdów, który jest łatwy do zbudowania/wdrożenia.

na wszelki wypadek link staje się nieważny oto kod: Pierwszym etapem jest utworzenie html następująco:

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

Następny będziemy pisać CSS, który przedstawia się następująco:

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

Jak widać, nie ma nic ekscytującego i skomplikowanego w tym CSS. W rzeczywistości nie jest to bardziej podstawowe, ale obiecuję, że to wszystko, co jest potrzebne.

Następny stworzymy 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) }); 
} 

});