Ⅰ、问题描述：
1、用JavaScript + html + css 实现，轮播图的循环播放和顺序播放等功能；
2、分析：
A、需要用 html + css 实现盒子模型的布局，呈现出轮播图的大致形状；
B、调用 JavaScript 中的 DOM 操作，实现加载信息的函数、左箭头事件绑定、右箭头事件绑定；
C、最后通过 DOM 操作实现轮播图的顺序播放事件的绑定、循环播放事件的绑定；
Ⅱ、实现过程如下：
1、运行软件VScode，亲测可实现；
2、运行代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#controls {
width: 400px;
margin: auto;
text-align: center;
}
#container {
width: 400px;
height: 400px;
border: 10px solid #eee;
background-color: gray;
margin: 10px auto 0;
position: relative;
}
#prev,
#next {
position: absolute;
background: black;
filter:alpha(opacity=40); /*该语句时为了兼容性问题，opacity(透明度) 是为了 IE8 以上的浏览器可直接使用， 而 'filter:alpha(opacity=40);(透明度)' 是为了低版本浏览器兼容用的； */
opacity: 0.4;
font-size: 20px;
color: white;
width: 40px;
height: 40px;
border: 2px solid white;
line-height: 40px;
text-align: center;
top: 180px;
cursor: pointer;
text-decoration: none;
}
#prev:hover,
#next:hover
{
opacity: 0.8;
filter: alpha(opacity=80);
}
#order,
#info
{
position: absolute;
width:100%;
height: 30px;
line-height: 30px;
text-align: center;
background: black;
filter:alpha(opacity=60);
opacity: 0.6;
font-size: 20px;
color: white;
}
#prev {
left: 0;
}
#next {
right: 0;
}
#picture {
height: 400px;
width: 400px;
}
#order {
top: 0;
}
#info {
bottom: 0;
}
</style>
</head>
<body>
<div id="controls">
<input type="button" value="循环播放" id="round">
<input type="button" value="顺序播放" id="single">
</div>
<div id="container">
<a href="javascript:" id="prev"><</a>
<a href="javascript:" id="next">></a>
<div id="order">图片加载中……</div>
<div id="info">图片加载中……</div>
<img id="picture">
</div>
<script type="text/javascript">
var imgArr = ['6.jpg','7.jpg','8.jpg','9.jpg'];
//将图片的位置信息放在数组里；
var txtArr = ['图片一','图片二','图片三','图片四'];
//将对应的图片信息能放在盒子中；
var index = 0;
var flag = true; //代表默认的情况是：顺序播放事件；
function $(id) {
//封装函数，根据 id 找元素；
return document.getElementById(id);
}
function showData() {
//封装函数，根据 id 将盒子中的图片，修改文字等放在盒子的相关位置上；
$('order').innerHTML = (index+1) + '/' + imgArr.length; //显示1/4、2/4....等信息；
$('info').innerHTML = txtArr[index]; //显示是图片几 (即：txtArr 中内容);
$('picture').src = imgArr[index]; //显示是第几张图片 (即：imgArr 中信息);
}
showData(); //千万别忘了运行该函数；
//左箭头事件绑定；
$('prev').onclick = function() {
index--;
if( flag && index === -1) {
//flag 为 true 代表其是顺序播放；
index = 0;
alert('已经是第一张了！');
} else if(!flag && index === -1){
//flag 为 false 代表其是循环播放；
index = imgArr.length - 1;
}
showData(); //运行加载信息的函数；
}
//右箭头事件绑定；
$('next').onclick = function() {
index++;
if( flag && index === imgArr.length) {
//flag 为 true 代表其是顺序播放；
index = imgArr.length - 1;
alert('已经是最后一张了！');
} else if ( !flag && index === imgArr.length) {
//flag 为 false 代表其是循环播放；
index = 0;
}
showData(); //运行加载信息的函数；
}
//顺序播放事件绑定；
$('single').onclick = function() {
flag = true; //表示：当点击'开始顺序播放了'按钮时，就将 flag 的值转换成 true ，以备触发事件时使用；
alert('开始顺序播放了');
}
//循环播放事件绑定；
$('round').onclick = function() {
flag = false; //表示：当点击'开始循环播放了'按钮时，就将 flag 的值转换成 false ，以备触发事件时使用；
alert('开始循环播放了');
}
</script>
</body>
</html>
3、注意：
A、我没有附上图片的信息，自己可以随便找到四张照片，图片的名字与位置和数组 imgArr 中的保持一致即可；
B、若自己实现不了，可以找我上传的文档拿下来就可以在浏览器或 VScode，以及其他软件上可直接实现，地址为：
https://download.csdn.net/download/weixin_43405300/19627780?spm=1001.2014.3001.5503
4、结果展示：
A、顺序播放，结果展示：
其一、点击顺序播放按钮后；
其二、随便的一张图片展示：
其三、点击到第一张后，再点击左箭头的显示结果；
其四、点击到最后一张后，再点击右箭头的显示结果；
B、循环播放，结果展示：
其一、点击顺序播放按钮后；
其二、随便的一张图片展示：
其三、点击到第一张后，再点击左箭头的显示结果；(即：它会回到第四页)
其四、点击到最后一张后，再点击右箭头的显示结果；(即：它会回到第一页)
Ⅲ、小结：
哪里有不对或不合适的地方，还请大佬们多多指点和交流！
如果看完博客之后，还运行不成功，再附上已传文档的链接地址：
https://download.csdn.net/download/weixin_43405300/19627780?spm=1001.2014.3001.5503