Javascript CSS帮助：在循环中自动播放6个图像

我知道这已经被问过很多次了，我试着去看答案并跟随它们。但我似乎不知道如何将这些答案应用到我的特定代码中，现在我陷入了困境。如果有人能看一下并帮助我，我将不胜感激

简单地说，我只想做一个自动播放功能，可以播放这6幅图像，也可以播放和暂停。最好是一个按钮。这就是全部。 [JSFIDLE链接。虽然它没有图片。也许会有帮助？][1]

window.onload=function（）{
函数show1（）{
document.getElementById（“showingImage”）.src=“images/.jpg”；
}
函数show2（）{
document.getElementById（“showingImage”）.src=“images/2.jpg”；
}
函数show3（）{
document.getElementById（“showingImage”）.src=“images/3.jpg”；
}
函数show4（）{
document.getElementById（“showingImage”）.src=“images/4.jpg”；
}
函数show5（）{
document.getElementById（“showingImage”）.src=“images/5.jpg”；
}
函数show6（）{
document.getElementById（“showingImage”）.src=“images/6.jpg”；
}
var one=document.getElementById（“one”）；
1.onmouseover=show1；
var two=document.getElementById（“two”）；
2.onmouseover=show2；
var三=document.getElementById（“三”）；
3.onmouseover=show3；
var four=document.getElementById（“four”）；
4.onmouseover=show4；
var five=document.getElementById（“五”）；
5.onmouseover=show5；
var six=document.getElementById（“six”）；
6.onmouseover=show6；
}

#容器{
宽度：800px；
保证金：0自动；
背景色：红色；
}
#展示形象{
宽度：800px；
高度：400px；
}
#缩略图{
最大高度：50px；
保证金：10自动10；
文本对齐：居中；
}

HTML：

给你。我将

show

和

mouseover

函数重构为单个函数；

show（）

函数使用jQuery的

fadeIn

和

fadeOut

效果。该按钮可启动和停止幻灯片放映。我还稍微更改了CSS，使图像具有唯一的

id

，并且

缩略图

是一个类

window.onload=function（）{
var播放；
var-currentImage=1；
//显示具有200毫秒淡入/淡出效果的图像
功能显示（img）{
$（“#showingImage”）.fadeOut（200，函数（）{
$（“#showingImage”）.attr（“src”https://dl.dropboxusercontent.com/u/76726218/images/“+img+”.jpg”）.fadeIn（200）；
});
}
//初始化鼠标盖
$（“img.thumbnail”）.mouseover（函数（）{
log（$（this））；
显示（$（this.attr（“id”））；
});
//启动自动播放，每个图像1s
函数播放（）{
如果（！玩）{
播放=设置间隔（函数（）{
显示（当前图像+1）；
currentImage++；
currentImage%=6；
}, 1000);
}
}
//暂停自动播放
函数暂停（）{
间隙（演奏）；
玩=假；
}
//设置按钮以在播放和暂停之间切换
$（“#播放暂停按钮”）。单击（功能（e）{
如果（玩）{
暂停（）；
$（“#播放暂停按钮”）.html（“播放”）；
}否则{
play（）；
$（“#播放暂停按钮”）.html（“暂停”）；
}
});
//启动自动播放
play（）；
}

#容器{
宽度：800px；
保证金：0自动；
背景色：红色；
文本对齐：居中；
}
#展示形象{
宽度：800px；
高度：400px；
}
.缩略图{
最大高度：50px；
保证金：10自动10；
文本对齐：居中；
}

暂停

您的JSFIDLE链接需要更多链接。