首先非常感谢网友高琦的无私分享，此作品是他刚整理腾讯游戏英雄杀官网图片轮播特效，第一时间分享出来给大家，实现了图片旋转轮播效果，没有用到jquery,是用原生javascript实现的，效果很棒，大家好好看一下哦。。。
初始化代码如下：
initialize:function(id){
var _this=this;
this.box=typeof id=="string"?document.getElementById(id):id;
this.oPre=this.box.getElementsByTagName('pre')[0];
this.oNext=this.box.getElementsByTagName('pre')[1];
this.oUl=this.box.getElementsByTagName('ul')[0];
this.aLi=this.oUl.getElementsByTagName('li');
this.timer=null;
this.iCenter=3;
this.aStor=[];
this.options = [
{width:120, height:150, top:71, left:134, zIndex:1},
{width:130, height:170, top:61, left:0, zIndex:2},
{width:170, height:218, top:37, left:110, zIndex:3},
{width:224, height:288, top:0, left:262, zIndex:4},
{width:170, height:218, top:37, left:468, zIndex:3},
{width:130, height:170, top:61, left:620, zIndex:2},
{width:120, height:150, top:71, left:496, zIndex:1}
];
for(var i=0;i<this.aLi.length;i++) this.aStor[i]=this.aLi[i];
this.up();
this._oNext=function()
{
return _this.doNext.apply(_this);
}
this._oPre=function()
{
return _this.doPre.apply(_this);
}
this.addBing(this.oNext,"click",this._oNext);
this.addBing(this.oPre,"click",this._oPre);
setInterval(this._oNext,5000);
}
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
弹出层 HTML5 导航菜单 动画插件 css3 图片3D旋转 jquery弹出层 提示插件