用原生JS编写的类似轮播图特效（二）

JS部分：

 window.onload = function() {
var oBtn1 = document.getElementById("btn1");
var oBtn2 = document.getElementById("btn2");
var oTitle = document.getElementById("title");
var oImg = document.getElementById("img_list");
var oCon_title = document.getElementById("con_title");
var oNum = document.getElementById("num");
var oPre = document.getElementById("pre");
var oNext = document.getElementById("next");

var imgList=["img/tm-img.jpg","img/tm-img1.jpg","img/tm-img2.jpg","img/tm-img4.jpg"]
var titleList = ["忧伤","思念","风景","孤独"];
oNum.innerHTML = 1 + '/' + imgList.length;
oCon_title.innerHTML = "这是第一张图片";
var num = 0;
var onoff = true; //true  顺序播放   false  循环播放
oBtn1.onclick = function() {
onoff = true;
oTitle.innerHTML = "图片顺序播放";
};
oBtn2.onclick = function() {
onoff = false;
oTitle.innerHTML = "图片循环播放";
};
oPre.onclick = function() {
num--;
if(num < 0) {
if(onoff) { //true  顺序播放
num = 0;
alert("已经是第一张啦！");
} else {

 num = imgList.length - 1;

}

}changeImg(num)};oNext.onclick = function() {num++;if(num > imgList.length - 1) {if(onoff) { //true 顺序播放num = imgList.length - 1;alert("已经是最后一张啦！");} else {num = 0;}}changeImg(num);};function changeImg(num) {oImg.src = imgList[num];oCon_title.innerHTML = titleList[num];oNum.innerHTML = num + 1 + '/' + imgList.length;};};

HTML部分：

<div class="box">
<div id="btns">
<input id="btn1" type="button" value="顺序播放" />
<input id="btn2" type="button" value="循环播放" />
<p id="title">图片顺序播放</p>
</div>
<div id="content">
<img id="img_list" src="img/tm-img.jpg" alt="">
<p id="con_title"></p>
<span id="num"></span>
</div>
<div id="changeBtn">
<input id="pre" type="button" value="上一张">
<input id="next" type="button" value="下一张">
</div>
</div>

CSS部分：

body,
p {
margin: 0px;
padding: 0px;
}
			
input {
outline: none;
border: none;
padding: 0;
}
			
.box {
width: 320px;
height: 320px;
position: relative;
margin: 50px auto;
}
			
#img_list {
width: 320px;
height: 200px;
}
			
#btns {
text-align: center;
}
			
#btn1,
#btn2,
#pre,
#next {

background-color: #727272;

color: #fff;

height: 22px;

width: 70px;

border-radius: 4px;

line-height: 22px;

margin: auto auto;

text-align: center; font-size: 12px; }

background-color: #aeaeae;

#btn1:hover, #btn2:hover { color: #feffa8; }

line-height: 30px;

#btns #title, #num { width: 320px; height: 30px;

}

font-size: 16px; display: block; } #content { width: 320px;

text-align: center;

}

#content #con_title {

width: 320px; height: 30px;

text-align: center;

line-height: 30px; background-color: #000;

position: absolute;

filter: alpha(opacity(40)); opacity: 0.4; top: 223px; color: #fff; }

text-align: center;

#changeBtn {

width: 320px;