js轮播

  1 var PImgPlayer = {
  2     _timer : null,
  3     _items : [],
  4     _container : null,
  5     _index : 0,
  6     _imgs : [],
  7     intervalTime : 5000,    //轮播间隔时间
  8     init : function( objID, w, h, time ){
  9         this.intervalTime = time || this.intervalTime;
 10         this._container = document.getElementById( objID );
 11         this._container.style.display = "block";
 12         this._container.style.width = w + "px";
 13         this._container.style.height = h + "px";
 14         this._container.style.position = "relative";
 15         this._container.style.overflow  = "hidden";
 16         //this._container.style.border = "1px solid #fff";
 17         var linkStyle = "display: block; TEXT-DECORATION: none;";
 18         if( document.all ){
 19             linkStyle += "FILTER:";
 20             linkStyle += "progid:DXImageTransform.Microsoft.Barn(duration=0.5, motion='out', orientation='vertical') ";
 21             linkStyle += "progid:DXImageTransform.Microsoft.Barn ( duration=0.5,motion='out',orientation='horizontal') ";
 22             linkStyle += "progid:DXImageTransform.Microsoft.Blinds ( duration=0.5,bands=10,Direction='down' )";
 23             linkStyle += "progid:DXImageTransform.Microsoft.CheckerBoard()";
 24             linkStyle += "progid:DXImageTransform.Microsoft.Fade(duration=0.5,overlap=0)";
 25             linkStyle += "progid:DXImageTransform.Microsoft.GradientWipe ( duration=1,gradientSize=1.0,motion='reverse' )";
 26             linkStyle += "progid:DXImageTransform.Microsoft.Inset ()";
 27             linkStyle += "progid:DXImageTransform.Microsoft.Iris ( duration=1,irisStyle=PLUS,motion=out )";
 28             linkStyle += "progid:DXImageTransform.Microsoft.Iris ( duration=1,irisStyle=PLUS,motion=in )";
 29             linkStyle += "progid:DXImageTransform.Microsoft.Iris ( duration=1,irisStyle=DIAMOND,motion=in )";
 30             linkStyle += "progid:DXImageTransform.Microsoft.Iris ( duration=1,irisStyle=SQUARE,motion=in )";
 31             linkStyle += "progid:DXImageTransform.Microsoft.Iris ( duration=0.5,irisStyle=STAR,motion=in )";
 32             linkStyle += "progid:DXImageTransform.Microsoft.RadialWipe ( duration=0.5,wipeStyle=CLOCK )";
 33             linkStyle += "progid:DXImageTransform.Microsoft.RadialWipe ( duration=0.5,wipeStyle=WEDGE )";
 34             linkStyle += "progid:DXImageTransform.Microsoft.RandomBars ( duration=0.5,orientation=horizontal )";
 35             linkStyle += "progid:DXImageTransform.Microsoft.RandomBars ( duration=0.5,orientation=vertical )";
 36             linkStyle += "progid:DXImageTransform.Microsoft.RandomDissolve ()";
 37             linkStyle += "progid:DXImageTransform.Microsoft.Spiral ( duration=0.5,gridSizeX=16,gridSizeY=16 )";
 38             linkStyle += "progid:DXImageTransform.Microsoft.Stretch ( duration=0.5,stretchStyle=PUSH )";
 39             linkStyle += "progid:DXImageTransform.Microsoft.Strips ( duration=0.5,motion=rightdown )";
 40             linkStyle += "progid:DXImageTransform.Microsoft.Wheel ( duration=0.5,spokes=8 )";
 41             linkStyle += "progid:DXImageTransform.Microsoft.Zigzag ( duration=0.5,gridSizeX=4,gridSizeY=40 ); width: 100%; height: 100%";
 42         }
 43         //
 44         var ulStyle = "margin:0;width:"+w+"px;position:absolute;z-index:999;right:5px;FILTER:Alpha(Opacity=30,FinishOpacity=90, Style=1);overflow: hidden;bottom:-1px;height:16px; border-right:1px solid #fff;";
 45         //
 46         var liStyle = "margin:0;list-style-type: none; margin:0;padding:0; float:right;";
 47         //
 48         var baseSpacStyle = "clear:both; display:block; width:23px;line-height:18px; font-size:12px; FONT-FAMILY:'宋体';opacity: 0.6;";
 49         baseSpacStyle += "border:1px solid #fff;border-right:0;border-bottom:0;";
 50         baseSpacStyle += "color:#fff;text-align:center; cursor:pointer; ";
 51         //
 52         var ulHTML = "";
 53         for(var i = this._items.length -1; i >= 0; i--){
 54             var spanStyle = "";
 55             if( i==this._index ){
 56                 spanStyle = baseSpacStyle + "background:#ff0000;";
 57             } else {                
 58                 spanStyle = baseSpacStyle + "background:#000;";
 59             }
 60             ulHTML += "<li style=\""+liStyle+"\">";
 61             ulHTML += "<span onmouseover=\"PImgPlayer.mouseOver(this);\" onmouseout=\"PImgPlayer.mouseOut(this);\" style=\""+spanStyle+"\" onclick=\"PImgPlayer.play("+i+");return false;\" herf=\"javascript:;\" title=\"" + this._items[i].title + "\">" + (i+1) + "</span>";
 62             ulHTML += "</li>";
 63         }
 64         //
 65         var html = "<a href=\""+this._items[this._index].link+"\" title=\""+this._items[this._index].title+"\" target=\"_blank\" style=\""+linkStyle+"\"></a><ul style=\""+ulStyle+"\">"+ulHTML+"</ul>";
 66         this._container.innerHTML = html;
 67         var link = this._container.getElementsByTagName("A")[0];    
 68         link.style.width =  w + "px";
 69         link.style.height = h + "px";
 70         link.style.background = 'url(' + this._items[0].img + ') no-repeat center center';
 71         //
 72         this._timer = setInterval( "PImgPlayer.play()", this.intervalTime );
 73     },
 74     addItem : function( _title, _link, _imgURL ){
 75         this._items.push ( {title:_title, link:_link, img:_imgURL } );
 76         var img = new Image();
 77         img.src = _imgURL;
 78         this._imgs.push( img );
 79     },
 80     play : function( index ){
 81         if( index!=null ){
 82             this._index = index;
 83             clearInterval( this._timer );
 84             this._timer = setInterval( "PImgPlayer.play()", this.intervalTime );
 85         } else {
 86             this._index = this._index<this._items.length-1 ? this._index+1 : 0;
 87         }
 88         var link = this._container.getElementsByTagName("A")[0];    
 89         if(link.filters){
 90             var ren = Math.floor(Math.random()*(link.filters.length));
 91             link.filters[ren].Apply();
 92             link.filters[ren].play();
 93         }
 94         link.href = this._items[this._index].link;
 95         link.title = this._items[this._index].title;
 96         link.style.background = 'url(' + this._items[this._index].img + ') no-repeat center center';
 97         //
 98         var liStyle = "margin:0;list-style-type: none; margin:0;padding:0; float:right;";
 99         var baseSpacStyle = "clear:both; display:block; width:23px;line-height:18px; font-size:12px; FONT-FAMILY:'宋体'; opacity: 0.6;";
100         baseSpacStyle += "border:1px solid #fff;border-right:0;border-bottom:0;";
101         baseSpacStyle += "color:#fff;text-align:center; cursor:pointer; ";
102         var ulHTML = "";
103         for(var i = this._items.length -1; i >= 0; i--){
104             var spanStyle = "";
105             if( i==this._index ){
106                 spanStyle = baseSpacStyle + "background:#ff0000;";
107             } else {                
108                 spanStyle = baseSpacStyle + "background:#000;";
109             }
110             ulHTML += "<li style=\""+liStyle+"\">";
111             ulHTML += "<span onmouseover=\"PImgPlayer.mouseOver(this);\" onmouseout=\"PImgPlayer.mouseOut(this);\" style=\""+spanStyle+"\" onclick=\"PImgPlayer.play("+i+");return false;\" herf=\"javascript:;\" title=\"" + this._items[i].title + "\">" + (i+1) + "</span>";
112             ulHTML += "</li>";
113         }
114         this._container.getElementsByTagName("UL")[0].innerHTML = ulHTML;    
115     },
116     mouseOver : function(obj){
117         var i = parseInt( obj.innerHTML );
118         if( this._index!=i-1){
119             obj.style.color = "#ff0000";
120         }
121     },
122     mouseOut : function(obj){
123         obj.style.color = "#fff";
124     }
125 }

 

转载于:https://www.cnblogs.com/huangxiang/archive/2012/01/17/2324805.html