效果图：
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
font-family: "微软雅黑";
}
#wrap{
width: 400px;
height: 500px;
border: 1px solid #ccc;
margin: 20px auto;
position: relative;
overflow: hidden;
background: #f1f1f1;
}
#wrap a{
width: 40px;
height: 50px;
background:rgba(0,0,0,.4);
/*border: 1px solid #fff;*/
position: absolute;
top: 50%;
margin-top: -25px;
text-align: center;
text-decoration: none;
line-height: 50px;
color: white;
font-size: 30px;
}
#wrap a:hover{
background:rgba(0,0,0,.9);
}
#prev{
left: 10px;
}
#next{
right: 10px;
}
#note,#span1{
position: absolute;
left: 0;
width: 400px;
height: 30px;
line-height: 30px;
text-align: center;
color: white;
background: rgba(0,0,0,.6);
}
#note{
bottom: 0;
}
#span1{
top: 0;
}
#img1{
width: 400px;
height: 500px;
}
section{
width: 400px;
height: 50px;
margin: 30px auto 0;
line-height: 50px;
text-align: center;
}
section input{
padding: 5px 15px;
margin-right: 10px;
}
.pink{
background: pink;
color: white;
}
</style>
</head>
<script>
window.onload=function(){
var oprev=document.getelementbyid('prev');
var onext=document.getelementbyid('next');
var onote=document.getelementbyid('note');
var ospan=document.getelementbyid('span1');
var oimg=document.getelementbyid('img1');
var arrurl=['https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488463139&di=af377bee44237b092b20f1f7c86f2eb6&imgtype=jpg&er=1&src=http%3a%2f%2fwww.wed114.cn%2fjiehun%2fuploads%2fallimg%2f160304%2f52_160304170213_3.jpg','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488463080&di=a0ba47cd212e8f5755a2f42738511a2e&imgtype=jpg&er=1&src=http%3a%2f%2fwww.6a8a.com%2fuploadfile%2f2017%2f0809%2f2016071617592321137.jpg','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488463040&di=f9290db609a0994bdbd7221e644904ba&imgtype=jpg&er=1&src=http%3a%2f%2fwww.wed114.cn%2fjiehun%2fuploads%2fallimg%2f160405%2f52_160405165047_3.jpg','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488462814&di=e1dacd05467c01a13d9eb4d800853f20&imgtype=jpg&er=1&src=http%3a%2f%2fwww.wed114.cn%2fjiehun%2fuploads%2fallimg%2f160304%2f52_160304160734_5.jpg','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1487868087852&di=3011f4a2b23b63559c32f8f154ad0a3a&imgtype=0&src=http%3a%2f%2fwww.wed114.cn%2fjiehun%2fuploads%2fallimg%2f160411%2f52_160411172520_1.jpg'];
var arrnote=['多肉植物佛珠怎么养 翡翠珠的养殖方法','多肉植物紫弦月的养殖方法','多肉植物球松怎么养 球松的养殖方法','是一种小巧又可爱的 多肉植物','多肉植物蓝松怎么繁殖'];
var num=0;
var obtn=document.getelementsbytagname('input');
var onoff=true;
obtn[0].onclick=function(){
onoff=true;
this.classname='pink';
this.nextsibling.classname='';
}
obtn[1].onclick=function(){
onoff=false;
this.classname='pink';
this.previoussibling.classname='';
}
function fntab(){
ospan.innerhtml=num+1+'/'+arrurl.length;
oimg.src=arrurl[num];
onote.innerhtml=arrnote[num];
}
fntab();
oprev.onclick=function(){
num--;
if(num==-1){
if(onoff){
num=arrnote.length-1;
}else{
alert('已经是第一张图片了，亲！');
num=0;
}
}
fntab();
}
onext.onclick=function(){
num++;
if(num==arrnote.length){
if(onoff)
{
num=0;
}else{
alert('已经是第一张图片了，亲！');
num=arrnote.length-1;
}
}
fntab();
}
}
</script>
<body>
<section>
<input type="button" value="循环播放" class="pink"/><input type="button" value="顺序播放" />
</section>
<p id="wrap">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" id="prev"><</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" id="next">></a>
<p id="note">图片文字加载中......</p>
<span id="span1">数量正在计算中......</span>
<img id="img1" />
</p>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
更多js中开关变量使用。