简单的 JavaScript/HTML 幻灯片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7561960/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simple JavaScript/HTML Slideshow
提问by TopChef
New to Javascript, but after some research it loks like this would be the best method in implementing my desired output. I'm trying to produce a slideshow of images (5 pre-selected images) that automatically change between 5 second intervals. Can anyone point towards a tutorial or guide me along in this process? Any help is very much appreciated.
Javascript 新手，但经过一些研究，这看起来是实现我想要的输出的最佳方法。我正在尝试制作在 5 秒间隔之间自动更改的图像幻灯片（5 个预选图像）。任何人都可以指向教程或在此过程中指导我吗？很感谢任何形式的帮助。
采纳答案by Tim B James
A really nice jQuery slideshow type plugin is this http://www.devtrix.net/sliderman/It has many different transitions between slides, and is really easy to use.
一个非常好的 jQuery 幻灯片类型插件是http://www.devtrix.net/sliderman/它在幻灯片之间有许多不同的过渡，并且非常易于使用。
There are many out there, so a quick google search of "jQuery Slideshow" will produce hundreds of results.
那里有很多，所以在谷歌上快速搜索“jQuery Slideshow”将产生数百个结果。
回答by shuseel
Here is a Very simple code to create simple JavaScript/HTML slideshow only by using simple JavaScript and HTML codes :
这是一个非常简单的代码，只需使用简单的 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" />
回答by Michael Durrant
Just google for javascript content sliders
只是谷歌的 javascript 内容滑块
Here's 350 image and content sliders:
这是 350 个图像和内容滑块：
http://www.jqueryrain.com/example/jquery-slider-slideshow/
http://www.jqueryrain.com/example/jquery-slider-slideshow/
and here's 25 more:
还有 25 个：
http://vandelaydesign.com/blog/web-development/jquery-image-galleries/.
http://vandelaydesign.com/blog/web-development/jquery-image-galleries/。
回答by T30
There are thousands of examples, some very complex and sophisticated. The difficoult, rather, is to find one easy to understand for beginners.
有数以千计的例子，有些非常复杂和复杂。相反，困难的是找到一个易于初学者理解的方法。
After some research I've found this from css-tricks. (Uses jquery also).
经过一番研究，我从css-tricks 中发现了这一点。（也使用 jquery）。
回答by M_Griffiths
I know this is an old post but I though I would share my tutorial, for the benefit of anyone who comes across this question in future.
我知道这是一篇旧帖子，但我虽然会分享我的教程，以供将来遇到此问题的任何人使用。
Hope this helps somebody. Its a pretty simple and basic slideshow that is easy to build / implement.
希望这可以帮助某人。它是一个非常简单和基本的幻灯片，易于构建/实现。
Just In case the link becomes invalid here is the code: The first stage is to set up the html as follows:
以防万一链接无效，这里是代码： 第一阶段是按如下方式设置 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> -->
Next we will write the CSS, which is as follows:
接下来我们将编写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; }
As you can see there isn't anything exciting or complicated about this CSS. In fact it doesn't get more basic, but I promise that's all that's needed.
正如您所看到的，这个 CSS 没有任何令人兴奋或复杂的地方。事实上，它并没有变得更基本，但我保证这就是所需要的。
Next we will create the jQuery:
接下来我们将创建 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) });
}
});
