自定义属性图片轮播实例

<scripttype="text/javascript">
window.onload = function(){
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oSwi = document.getElementById('swiDes');
var oPicNum = document.getElementById('picNum');
var oPic = document.getElementById('pic');
var oPicInfo = document.getElementById('picInfo');
var oPrev = document.getElementById('prev');
var oNext = document.getElementById('next');

var num = 0;
var onOff = true;

//数组部分
var picUrl = ['img/1.jpg','img/2.jpg',cimg/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg'];
var picDes = ['增强免疫力美白功效的薏米仁','健脾养胃的小黄米','强腰补肾的黑米','黑发补身的黑芝麻',
'补肾强肾的黑豆','健脑益智的核桃'];
var aL = picUrl.length;
var apL = picDes.length;
//点击循环按钮时
oBtn1.onclick = function(){
onOff = true;
oSwi.innerHTML= '循环';
oBtn1.style.background = 'red';
oBtn2.style.background= '#eee';
}

//点击顺序按钮时
oBtn2.onclick = function(){
onOff = false;
oSwi.innerHTML= '顺序';
oBtn2.style.background= 'red';
oBtn1.style.background= '#eee';
}
//初始化加载部分
fnTab();
function fnTab(){
oPicNum.innerHTML= num + 1 + '/' +aL;
oPic.src= picUrl[num];
oPicInfo.innerHTML = picDes[num];
}

//点击左按钮时
oPrev.onclick = function(){
num--;
if(num == -1){
if(onOff){
num = aL-1;
}else{
alert("This is the last picture");
num =0;
}
}

fnTab();
}

//点击右按钮
oNext.onclick = function(){
num++;
if(num == aL){
if(onOff){
num = 0;
}else{
alert("This is the last picture");
num = aL-1;
}
}

fnTab();
}
}
</script>