简单的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) }); 
} 

});