android图片轮播序号,原生js写的带标题和序号的轮播图

/**Created by by(2292269685@qq.com) on 2018/3/7*/

//get the object

var oLi = document.getElementsByTagName("li"), //获取图片

leftArrow = document.getElementsByClassName("a-left")[0], //获取左边按钮

rightArrow = document.getElementsByClassName("a-right")[0], //获取右边按钮

topBar = document.querySelector(".t-num span"), //显示顶部数字用

btmBar = document.getElementsByClassName("b-title")[0], //显示底部简介用

btns = document.getElementsByTagName("button"), //获取正常播放和循环播放两个按钮

arrTitle = ["白少在双拥广场玩耍","白少在研究口红","白少在五岳独尊静坐","恩，是男神，没错儿","少爷在卖萌^_^"], //用数组按顺序存储标题

len = oLi.length, //用来获取图片的张数

index = 0, //用来存储当前图片的索引值

mark = true; //用来标记是单边播放还是循环播放，这里默认true为循环播放；false则为正常播放模式

//正常播放按钮事件

btns[0].onclick = function () {

this.className = 'active';

btns[1].className = "";

mark = false ;

}

//循环播放按钮事件

btns[1].onclick = function () {

this.className = 'active';

btns[0].className = "";

mark = true ;

}

leftArrow.onclick = fn;

rightArrow.onclick = fn;

//通过自定义属性来标记是否是点击上一张图片

leftArrow.isPrev = true;

rightArrow.isPrev = false ;

function fn() {

oLi[index].className = ''; //隐藏当前图片

if(this.isPrev){ //如果为true，则是点击上一张图片

index--; //序号自减，到上一张的索引值

if(mark){ // 如果是循环播放

if(index<0){

index = len-1;

}

}else { //如果是单边播放

if(index<0){

index = 0;

alert("前边没有了")

}

}

}else { //否则的话，是点击下一张图片

index++; //序号自减，到上一张的索引值

if(mark){ // 如果是循环播放

if(index>len-1){

index = 0;

}

}else { //如果是单边播放

if(index>len-1){

index = len-1;

alert("后边边没有了")

}

}

}

oLi[index].className = 'active';

topBar.innerHTML = index + 1;

btmBar.innerHTML = arrTitle[index];

}