}
input{
width: 100px;
height: 30px;
position: absolute;
top: 20px;
}
#btn1{
left: 190px;
}
#btn2{
right: 190px;
}
#text1{
position: absolute;
top: 50px;
left: 200px;
}
</style>
<script>
window.onload = function(){
var oBtn1 = document.getElementById(‘btn1‘);
var oBtn2 = document.getElementById(‘btn2‘);
var oText1 = document.getElementById(‘text1‘);
var oSpan = document.getElementById(‘span‘);
var oPre = document.getElementById(‘pre‘);
var oNext = document.getElementById(‘next‘);
var oText2 = document.getElementById(‘text2‘);
var oImg = document.getElementById(‘img‘);
var arrUrl = [‘https://c-ssl.duitang.com/uploads/item/201708/29/20170829092524_t8mf4.thumb.700_0.jpeg‘,
‘http://n.sinaimg.cn/sinacn04/377/w533h644/20180403/3a48-fysuuxz8638223.jpg‘,
‘https://07.imgmini.eastday.com/mobile/20180126/435bdb37f7f347e266bcc98621ac5146.jpeg‘];
var arrText = [‘李沁‘,‘乔欣‘,‘宋祖儿‘];
var arrText1=[‘图片可从最后一张跳转到第一张‘,‘图片只能到最后一个或第一张切换‘]
var num = 0;
var onoff = true;
function frimg(){
oSpan.innerHTML = num+1 +‘/‘+ arrUrl.length;
oText2.innerHTML = arrText[num];
oImg.src = arrUrl[num];
oText1.innerHTML = arrText1[0];
}
frimg();
oBtn1.onclick = function(){
onoff = true;
oText1.innerHTML = arrText1[0];
}
oBtn2.onclick = function(){
onoff=false;
oText1.innerHTML =arrText1[1];
}
oPre.onclick = function(){
num--;
if(num ==-1){
if(onoff){
num = arrUrl.length-1;
}else{
alert(‘已经是第一张啦~‘)
num= 0;
}
}
frimg();
};
oNext.onclick = function(){
num++;
if(num == arrUrl.length){
if(onoff){
num = 0;
}else{
alert(‘已经到最后一张啦~‘)
num = arrUrl.length-1;
}
}
frimg();
}}
</script>
<body>
<div class="wp">
<input type="button" value="循环切换" id="btn1">
<input type="button" value="顺序切换" id="btn2">
<p id="text1"></p>
<div class="div_wp">
<span id="span"></span>
<a id="pre" href="javascript:;"><</a>
<a id="next" href="javascript:;">></a>
<p id="text2"></p>
<img src="02作业-imgs/img1.jpg" alt="" id="img">
</div>
</div>
</body>
</html>
原文：https://blog.51cto.com/13765978/2462871