使用原生的javascript来实现轮播图(2)

一般在做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"; }

以上所述是小编给大家介绍的使用原生的javascript来实现轮播图,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwzfgd.html