清华大佬耗费三个月吐血整理的几百G的资源,免费分享!....>>>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 | <!Doctype html> <html> <head> <meta http-equiv= "Content-type" content= "text/html; charset=utf-8" /> <title>shutter</title> <style type= "text/css" _mce_bogus= "1" ><!-- span{ overflow : hidden ; font-size : 0 ; line-height : 0 } .shutter{ position : relative ; overflow : hidden ; height : 300px ; width : 500px } .shutter li{ position : absolute ; left : 0 ; top : 0 ;} ul,li{ list-style : none ; margin : 0 ; padding : 0 } img{ display : block ; border : none } .shutter-nav{ display :inline- block ; margin-right : 8px ; color : #fff ; padding : 2px 6px ; background : #333 ; border : 1px solid #fff ; font-family : Tahoma ; font-weight : bold ; font-size : 12px ; cursor : pointer ;} .shutter-cur-nav{ display :inline- block ; margin-right : 8px ; color : #fff ; padding : 2px 6px ; background : #ff7a00 ; border : 1px solid #fff ; font-family : Tahoma ; font-weight : bold ; font-size : 12px ; cursor : pointer ;} --></style> <script type= "text/javascript" ><!-- var Hongru={}; function H$(id){return document.getElementById(id)} function H$$(c,p){return p.getElementsByTagName(c)} Hongru.shutter = function(){ function init(anchor,options){this.anchor=anchor; this.init(options);} init.prototype = { init:function(options){ //options参数:id(必选):图片列表父标签id; auto (可选):自动运行时间;index(可选):开始的运行的图片序号 var wp = H$(options.id), // 获取图片列表父元素 ul = H$$( 'ul' ,wp)[ 0 ], // 获取 li = this.li = H$$( 'li' ,ul); this.a = options. auto ?options.auto: 4 ; //自动运行间隔 this.index = options.position?options. position : 0 ; //开始运行的图片序号(从 0 开始) this.l = li.length; this.cur = 0 ; //当前显示的图片序号&&z-index变量 this.stN = options.shutterNum?options.shutterNum: 5 ; this.dir = options.shutterDir?options.shutterDir: 'H' ; this.W = wp.offsetWidth; this.H = wp.offsetHeight; this.aw = 0 ; this.mask = []; this.nav = []; ul.style.display = 'none' ; var container = this.container = document.createElement( 'div' ), con_a = this._a = document.createElement( 'a' ); con_a.target = '_blank' ; container.style.cssText = con_a.style.cssText = 'position:absolute;width:' +this.W+ 'px;height:' +this.H+ 'px;left:0;top:0' ; container.appendChild(con_a); for (var x= 0 ; x<this.stN; x++) { var mask = document.createElement( 'span' ); mask.style.cssText = this.dir == 'H' ? 'position:absolute;width:' +this.W/this.stN+ 'px;height:' +this.H+ 'px;left:' +x*this.W/this.stN+ 'px;top:0' : 'position:absolute;width:' +this.W+ 'px;height:' +this.H/this.stN+ 'px;left:0px;top:' +x*this.H/this.stN+ 'px' ; this.mask.push(mask); con_a.appendChild(mask); } wp.appendChild(container); this.nav_wp = document.createElement( 'div' ); //先建一个div作为控制器父标签,你也可以用<ul>或<ol>来做,语义可能会更好,这里我就不改了 this.nav_wp.style.cssText = 'position:absolute;right:0;bottom:0;padding:8px 0;' ; //为它设置样式 for(var i= 0 ;i<this.l;i++){ /* == 绘制控制器 == */ var nav = document.createElement( 'a' ); //这里我就直接用a标签来做控制器,考虑语义的话你也可以用li nav.className = options.navClass?options.navClass: 'shutter-nav' ; //控制器class,默认为 'shutter-nav' this.nav.push[nav]; nav.innerHTML = i+ 1 ; nav.onclick = new Function(this.anchor+ '.pos(' +i+ ')' ); //绑定onclick事件,直接调用之前写好的pos()函数 this.nav_wp.appendChild(nav); } wp.appendChild(this.nav_wp); this.curC = options.curNavClass?options.curNavClass: 'shutter-cur-nav' ; this.pos(this.index); //变换函数 }, auto:function(){ this.li.a = setInterval(new Function(this.anchor+ '.move(1)' ),this.a* 1000 ); }, move:function(i){//参数i有两种选择, 1 和 -1 , 1 代表运行到下一张, -1 代表运行到上一张 var n = this.cur+i; var m = i== 1 ?n==this.l? 0: n:n< 0 ?this.l -1: n; //下一张或上一张的序号(注意三元选择符的运用) this.pos(m); //变换到上一张或下一张 }, pos:function(i){ clearInterval(this.li.a); clearInterval(this.li[i].a); this.aw = this.dir == 'H' ?this.H : this.W; var src = H$$( 'img' ,this.li[i])[ 0 ].src; var _n = i+ 1 >=this.l? 0: i+ 1 ; var src_n = H$$( 'img' ,this.li[_n])[ 0 ].src; this.container.style.backgroundImage = 'url(' +src_n+ ')' ; for(var n= 0 ;n<this.stN;n++){ this.mask[n].style.cssText = this.dir == 'H' ? 'position:absolute;width:' +this.W/this.stN+ 'px;height:' +this.H+ 'px;left:' +n*this.W/this.stN+ 'px;top:0' : 'position:absolute;width:' +this.W+ 'px;height:' +this.H/this.stN+ 'px;left:0px;top:' +n*this.H/this.stN+ 'px' ; this.mask[n].style.background = this.dir == 'H' ? 'url(' +src+ ') no-repeat -' +n*this.W/this.stN+ 'px 0' : 'url(' +src+ ') no-repeat 0 -' +n*this.H/this.stN+ 'px' ; } this.cur = i; //绑定当前显示图片的正确序号 this.li.a = false; for(var x= 0 ;x<this.l;x++){ H$$( 'a' ,this.nav_wp)[x].className = x==i?this.curC: 'shutter-nav' ; //绑定当前控制器样式 } this._a.href = H$$( 'a' ,this.li[i])[ 0 ].href; //this. auto (); //自动运行 this.li[i].a = setInterval(new Function(this.anchor+ '.anim(' +i+ ')' ), 6 *this.stN); }, anim: function (i) { var tt = this.dir == 'H' ? Math.abs(parseInt(this.mask[this.stN -1 ].style. top )) : Math.abs(parseInt(this.mask[this.stN -1 ].style. left )); if(this.aw-tt<= 5 ){ clearInterval(this.li[i].a); for(var n= 0 ;n<this.stN;n++){ var d = n% 2 == 0 ? 1 : -1 ; this.dir == 'H' ? this.mask[n].style. top = this.aw*d + 'px' : this.mask[n].style. left = this.aw*d + 'px' ; } if(!this.li.a) {this. auto ()} }else { for(var n= 0 ;n<this.stN;n++){ var d = n% 2 == 0 ? 1 : -1 ; var ts = (this.aw-Math.ceil(Math.abs(this.aw-tt)*. 75 ))*d; this.dir == 'H' ? this.mask[n].style. top = ts + 'px' : this.mask[n].style. left = ts + 'px' ; } } } } return {init:init} }(); // --></script> </head> <body> <div id= "shutter" class= "shutter" style= "float:left" _mce_style= "float: left;" > <ul> <li><a href= "http://www.cnblogs.com/hongru/" _mce_href= "http://www.cnblogs.com/hongru/" target= "_blank" ><img src= "http://images.cnblogs.com/cnblogs_com/hongru/264552/o_1.jpg" _mce_src= "http://images.cnblogs.com/cnblogs_com/hongru/264552/o_1.jpg" /></a></li> <li><a href= "http://www.cnblogs.com/hongru/" _mce_href= "http://www.cnblogs.com/hongru/" target= "_blank" ><img src= "http://images.cnblogs.com/cnblogs_com/hongru/264552/o_2.jpg" _mce_src= "http://images.cnblogs.com/cnblogs_com/hongru/264552/o_2.jpg" /></a></li> <li><a href= "http://www.cnblogs.com/hongru/" _mce_href= "http://www.cnblogs.com/hongru/" target= "_blank" ><img src= "http://images.cnblogs.com/cnblogs_com/hongru/264552/o_3.jpg" _mce_src= "http://images.cnblogs.com/cnblogs_com/hongru/264552/o_3.jpg" /></a></li> <li><a href= "http://www.cnblogs.com/hongru/" _mce_href= "http://www.cnblogs.com/hongru/" target= "_blank" ><img src= "http://images.cnblogs.com/cnblogs_com/hongru/264552/o_4.jpg" _mce_src= "http://images.cnblogs.com/cnblogs_com/hongru/264552/o_4.jpg" /></a></li> <li><a href= "http://www.cnblogs.com/hongru/" _mce_href= "http://www.cnblogs.com/hongru/" target= "_blank" ><img src= "http://images.cnblogs.com/cnblogs_com/hongru/264552/o_5.jpg" _mce_src= "http://images.cnblogs.com/cnblogs_com/hongru/264552/o_5.jpg" /></a></li> </ul> </div> <div id= "shutter2" class= "shutter" style= "float:right" _mce_style= "float: right;" > <ul> <li><a href= "http://www.cnblogs.com/hongru/" _mce_href= "http://www.cnblogs.com/hongru/" target= "_blank" ><img src= "http://images.cnblogs.com/cnblogs_com/hongru/264552/o_1.jpg" _mce_src= "http://images.cnblogs.com/cnblogs_com/hongru/264552/o_1.jpg" /></a></li> <li><a href= "http://www.cnblogs.com/hongru/" _mce_href= "http://www.cnblogs.com/hongru/" target= "_blank" ><img src= "http://images.cnblogs.com/cnblogs_com/hongru/264552/o_2.jpg" _mce_src= "http://images.cnblogs.com/cnblogs_com/hongru/264552/o_2.jpg" /></a></li> <li><a href= "http://www.cnblogs.com/hongru/" _mce_href= "http://www.cnblogs.com/hongru/" target= "_blank" ><img src= "http://images.cnblogs.com/cnblogs_com/hongru/264552/o_3.jpg" _mce_src= "http://images.cnblogs.com/cnblogs_com/hongru/264552/o_3.jpg" /></a></li> <li><a href= "http://www.cnblogs.com/hongru/" _mce_href= "http://www.cnblogs.com/hongru/" target= "_blank" ><img src= "http://images.cnblogs.com/cnblogs_com/hongru/264552/o_4.jpg" _mce_src= "http://images.cnblogs.com/cnblogs_com/hongru/264552/o_4.jpg" /></a></li> <li><a href= "http://www.cnblogs.com/hongru/" _mce_href= "http://www.cnblogs.com/hongru/" target= "_blank" ><img src= "http://images.cnblogs.com/cnblogs_com/hongru/264552/o_5.jpg" _mce_src= "http://images.cnblogs.com/cnblogs_com/hongru/264552/o_5.jpg" /></a></li> </ul> </div> <script type= "text/javascript" ><!-- var shutterH = new Hongru.shutter.init( 'shutterH' ,{ id: 'shutter' }); var shutterV = new Hongru.shutter.init( 'shutterV' ,{ id: 'shutter2' , auto: 2 , shutterNum: 4 , shutterDir: 'V' , position : 3 }); // --></script> </body> </html> |