原生javascript实现banner图自动轮播切换

阅读() @2018-07-15 14:13:30

一般在做banner轮播图的时候都是用jquery,因为代码少,方便,不需要花费很长的时间去获取某个元素作为变量,然后再进行操作,只要一个$就搞定了。但是今天我用原生的javascript做了一下这个轮播效果,感觉还行,以下是部分js源代码,仅供参考!文章底部查看效果演示。

1、鼠标离开banner图,每隔2s切换一次;

2、鼠标滑过下方的小按钮,可以切换图片;

3、鼠标点击左右按钮,可以切换图片。

var oPic,oLi,anniu,aLi,aLength,num,timer,oG,_index,oSpan;
window.onload = function(){
	oPic = document.getElementsByClassName("pic")[0];
	oLi = oPic.getElementsByTagName("li");
	anniu = document.getElementsByClassName("anniu")[0];
	aLi = anniu.getElementsByTagName("li");
	aLength = aLi.length;
	num = 0;
	oG = document.getElementsByClassName("g")[0];
	oSpan = oG.getElementsByTagName("span");
	oLeft = oSpan[0];
	oRight = oSpan[1];
	start();
	oG.onmouseover = end;
	oG.onmouseout = start;
	for(var j=0; j<aLength; j++){
		aLi[j].index = j;
		aLi[j].onmouseover = change;
	}
	oRight.onclick = time;
	oLeft.onclick = times;
}
//自动轮播开始或结束
function start(){
		timer = setInterval(time,2000);
		hide();
}
function end(){
	clearInterval(timer);
	show();
}
//图片切换++
function time(){
	for(var i=0; i<aLength; i++){
		oLi[i].style.display = "none";
		aLi[i].className = "";
	}
	num++;
	num = num % 4;
	oLi[num].style.display = "block";
	aLi[num].className = "on";
}
//图片切换--
function times(){
	for(var i=0; i<aLength; i++){
		oLi[i].style.display = "none";
		aLi[i].className = "";
	}
	num--;
	num = (num+4)%4;
	oLi[num].style.display = "block";
	aLi[num].className = "on";
}
//鼠标滑过按钮,图片轮播
function change(){
	_index = this.index;
	for(var k=0; k<aLength; k++){
		aLi[k].className = "";
		oLi[k].style.display = "none";
	}
	aLi[_index].className = "on";
	oLi[_index].style.display = "block";
}
//左右按钮显示或隐藏
function show(){
	oSpan[0].style.display = "block";
	oSpan[1].style.display = "block";
}
function hide(){
	oSpan[0].style.display = "none";
	oSpan[1].style.display = "none";
}
效果演示 源码下载
加入QQ群,在群文件中免费下载源码提取密码!
微信二维码