简单的JavaScript/HTML幻灯片

对Javascript还不熟悉，但经过一些研究后，这种方法将是实现所需输出的最佳方法。我正在尝试制作一个幻灯片的图像（5预先选择的图像），自动改变之间的5秒间隔。在这个过程中，有人能给我指点一下教程或指导我吗？非常感谢您的帮助。

这是一个非常好的jQuery幻灯片类型插件 它在幻灯片之间有许多不同的过渡，并且非常容易使用

---

有很多，所以在谷歌上快速搜索“jQuery Slideshow”将产生数百个结果。

只需谷歌搜索javascript内容滑块即可

以下是350个图像和内容滑块：

这里还有25个：

---

.

这里有一个非常简单的代码，仅通过使用简单的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" />

var i=0；var path=新数组（）；
//图像列表
路径[0]=“image_1.gif”；
路径[1]=“image_2.gif”；
路径[2]=“image_3.gif”；
函数swapImage（）
{ 
document.slide.src=路径[i]；
if（i

有数千个示例，其中一些非常复杂和复杂。相反，困难在于找到一个对初学者来说容易理解的方法

---

经过一些研究，我从中发现了这个。（也使用jquery）。

我知道这是一篇老文章，但我想我会分享我的教程，以方便将来遇到这个问题的人

希望这对别人有帮助。 这是一个非常简单和基本的幻灯片，很容易构建/实现

为防止链接无效，代码如下： 第一阶段是按如下方式设置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> -->

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

});

$（文档）.ready（函数（）{
var currentPosition=0；
var slideWidth=650；
变量幻灯片=$（'.slide'）；
var numberOfSlides=slides.length；
var幻灯片放映间隔；
var速度=3000；
//分配一个计时器，使其定期运行
slideShowInterval=设置间隔（改变位置、速度）；
幻灯片。wrapAll（“”）；
css（{'float'：'left'}）；
//将#幻灯片文件夹宽度设置为所有幻灯片的总宽度
$（“#幻灯片文件夹”）.css（'width'，slideWidth*numberOfSlides）；
$（“#幻灯片窗口”）
.prepend（'向左移动'）
.append（'Move Right'）；
管理导航（当前位置）；
//告诉按钮单击时要执行的操作
$（'.slideNav'）.bind（'click'，函数（）{
//确定新位置
currentPosition=（$（this.attr（'id'）=='rightNav'）
？当前位置+1：当前位置-1；
//隐藏/显示控件
管理导航（当前位置）；
clearInterval（幻灯片放映间隔）；
slideShowInterval=设置间隔（改变位置、速度）；
moveSlide（）；
});
职能经理导航（职位）{
//如果位置是第一张幻灯片，则隐藏左箭头
如果（位置===0）{
$（'#leftNav'）.hide（）；
}
否则{
$（'#leftNav'）.show（）；
}
//隐藏右箭头是幻灯片位置是最后一张幻灯片
如果（位置===幻灯片数量-1）{
$（'#rightNav'）.hide（）；
}
否则{
$（'#rightNav'）.show（）；
}
}
//changePosition：当计时器移动幻灯片时调用，而不是单击下一个或上一个按钮时调用
函数changePosition（）{
如果（currentPosition==numberOfSlides-1）{
currentPosition=0；
管理导航（当前位置）；
}否则{
currentPosition++；
管理导航（当前位置）；
}
moveSlide（）；
}
//moveSlide：此功能用于移动幻灯片
函数moveSlide（）{
$（“#SlideShalder”）。动画（{'marginLeft'：slideWidth*（-currentPosition）}）；
}
});

您是希望将此作为一种练习来实现，还是可以接受（比如）以jQuery插件的形式预先制作的解决方案？有许多免费提供的幻灯片放映脚本可以完全满足您的需要。不推荐使用

脚本

标记的

语言

属性。我建议改为使用

类型

。在2015年更新了当前URL的URL。否决票是怎么回事？更重要的是，谁认为有必要否决我的答案，但不认为情况值得评论？我不反对反对票，但我想知道为什么，留下评论有多难？如果没有建设性的批评，我如何改进我的答案？如何在悬停时停止滑块？在悬停时停止，我的建议是在悬停时中断计时器功能。停止鼠标上的计时器，在鼠标上重新启动。好的，谢谢，我知道了。它工作得很好