簡單的JavaScript/HTML幻燈片

Question

JavaScript的新手，但經過一番研究後，這樣做會是實現我想要的輸出的最佳方法。我試圖產生一個圖像幻燈片（5個預選圖像），它會在5秒間隔內自動變化。任何人都可以指向一個教程，或在這個過程中指導我嗎？很感謝任何形式的幫助。

Answer 1

一個非常好的jQuery幻燈片類型插件是這樣的http://www.devtrix.net/sliderman/ 它有很多不同的幻燈片之間的轉換，並且非常容易使用。

這裏有很多，所以快速谷歌搜索「jQuery幻燈片」將產生數百個結果。

Answer 2

不僅僅是谷歌JavaScript內容滑塊

這裏的350個圖像和內容滑塊：

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

和這裏的25多個：

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

Answer 3

這是一個非常簡單的代碼只能通過簡單的JavaScript和HTML代碼來創建簡單的JavaScript/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

有成千上萬的例子，一些很複雜的，複雜的。相反，difficoult是爲初學者找到一個容易理解的。

經過一番研究，我發現這個從css-tricks。 （也使用jquery）。

Answer 5

我知道這是一箇舊帖子，但我會盡我所能分享我的教程，爲將來遇到此問題的任何人提供幫助。

Simple Slideshow

希望這有助於人。 它是一個非常簡單和基本的幻燈片，很容易建立/實施。

以防萬一鏈接變成這裏無效是代碼： 第一階段是成立的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; } 

正如你所看到的，這個CSS沒有任何令人興奮或複雜的東西。其實它並沒有變得更基本，但我承諾這就是所有需要的。

下一步，我們將創建了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) }); 
} 

});