腾讯游戏英雄杀官网图片轮播特效

来源:https://www.sucaihuo.com/js/1915.html 2017-05-09 17:24浏览(798) 收藏

此作品是他刚整理腾讯游戏英雄杀官网图片轮播特效,实现了图片旋转轮播效果,没有用到jquery,是用原生javascript实现的,效果很棒,大家好好看一下哦。。。
腾讯游戏英雄杀官网图片轮播特效
分类:图片代码 > 图片轮播 难易:初级
查看演示 下载资源 下载积分: 20 积分

初始化代码如下:

function Zoompic()
    {
       this.initialize.apply(this,arguments);
    }
    Zoompic.prototype=
    {
        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);
        },
        doNext:function()
        {
          this.aStor.unshift(this.aStor.pop());
          this.up();
        },
        doPre:function()
        {
          this.aStor.push(this.aStor.shift());
          this.up();
        },
        up:function()
        {
          _this=this;
           for(var i=0;i<this.aStor.length;i++) this.oUl.appendChild(this.aStor[i]);
            for(var i=0;i<this.aStor.length;i++)
            {
               this.aStor[i].index=i;
               if(i<7)
               {
                   this.css(this.aStor[i],"display","block");
                   this.starMove(this.aStor[i],this.options[i],function()
                   {
                       _this.starMove(_this.aStor[_this.iCenter].getElementsByTagName('img')[0],{opacity:100},function()
                       {
                           _this.aStor[_this.iCenter].onmouseover=function()
                           {
                               _this.starMove(this.getElementsByTagName('div')[0],{bottom:0});
                           }
                           _this.aStor[_this.iCenter].onmouseout=function()
                           {
                               _this.starMove(this.getElementsByTagName('div')[0],{bottom:-100});
                           }
                       });
                   })
               }
                if(i<this.iCenter || i>this.iCenter)
                {
                    this.css(this.aStor[i].getElementsByTagName('img')[0],"opacity",30);
                    this.aStor[i].onmouseover=function()
                    {
                     _this.starMove(this.getElementsByTagName('img')[0],{opacity:100});
                    }
                    this.aStor[i].onmouseout=function()
                    {
                        _this.starMove(this.getElementsByTagName('img')[0],{opacity:30});
                    }
                    this.aStor[i].onmouseout();
                }else
                {
                    this.aStor[i].onmouseover=this.aStor[i].onmouseout=null;
                }
            }
        },
标签: 图片轮播
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2