java写轮播图,几种不同想法的手写轮播图（第一种）

//定义了几个控件的id和变量

var numx = document.getElementById('numx');

var prev = document.getElementById('prev');

var next = document.getElementById('next');

var imgContent=document.getElementById('imgContent');

var dos = document.getElementsByTagName("span");

var imgChange = document.getElementById('imgChange');

//图片的数组

var imgArr = ['img/1.jpg','img/b10.png','img/b9.png','img/b2.png'];

var num = 0;

var timeL;

//图片轮播时左右按钮是隐藏的

prev.style.display='none';

next.style.display='none';

//实现动起来

animate(num);

//实现自动跳

play();

//整个轮播图鼠标覆盖上去就暂时停止，移开又继续自动跳

imgContent.οnmοuseοver=stop;

imgContent.οnmοuseοut=play;

//初始化第一个按钮亮起来的，且第一张图片显示出来

dos[0].className = "on";

//给每一个按钮添加点击事件

for (var i = 0; i < dos.length; i++) {

clickdos(i);

}

//根据点击的按钮的选择按钮的覆盖效果方法

//先循环把所有的按钮都变暗，再给点击的那个按钮覆盖效果

function changebutton(i){

for (var n = 0; n < dos.length; n++)

{

dos[n].className = "";

}

dos[i].className = "on";

}

//按钮的点击事件，点到哪个按钮就让该按钮有覆盖效果并且图片和文字也变化

//本来覆盖效果的那个方法可以直接放在这里头，但是因为有后续图片的变换按钮也会跟着有覆盖效果

//所以还是得分开放

function clickdos(i) {

dos[i].onclick = function () {

changebutton(i);

animate(i);

}

}

//动起来 根据num的数字判断图片和文字数组的第num个放出来

function animate(num){

numx.innerHTML = num+1 + '/' + imgArr.length; //数字变化

imgChange.src = imgArr[num]; //图片变化

}

//右边按钮的点击事件，num不断增加，当到了最后一个就从第一个重新开始

//并且根据num进行图片文字和按钮的变动，另一个按钮同理

next.onclick = function(){

num++;

if(num == imgArr.length){

num = 0;

}

animate(num);

changebutton(num);

}

prev.onclick = function(){

num--;

if(num == -1){

num = imgArr.length-1;

}

animate(num);

changebutton(num);

}

//定时器2s依次变动，同时左右按钮隐藏

function play(){

timeL=setInterval(function(){next.onclick();},2000)

prev.style.display='none';

next.style.display='none';

}

//暂停变动，清除定时器，同时左右按钮显示

function stop(){

clearInterval(timeL);

prev.style.display='block';

next.style.display='block';

}