效果图预览.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>使用纯生js实现图片轮换效果</title>> 5 <link href="Styles/style.css" rel="stylesheet" type="text/css" /> 6 </head> 7 <body> 8 <div id="slider"> 9 <div class="slide" style="border-left-style: none; left: 0px;"> 10 <a href="#"> 11 <img class="diapo" src="Images/642120642011110815551808.jpg" alt="" style="opacity: 0.8; 12 visibility: visible;"></a> 13 <div class="backgroundText" style="top: 233px;"> 14 </div> 15 <div class="text" style="top: 233px;"> 16 <span class="stitle">《千本哈》</span>金馆长进军音乐界</div> 17 </div> 18 <div class="slide" style="left: 90px;"> 19 <a href="#"> 20 <img class="diapo" src="Images/6421206420111014165330056.jpg" alt="" style="opacity: 0.8; 21 visibility: visible;"></a> 22 <div class="backgroundText" style="top: 231px;"> 23 </div> 24 <div class="text" style="top: 231px;"> 25 <span class="stitle">震惊</span>关于金馆长那些high爆了的表情</div> 26 </div> 27 <div class="slide" style="left: 190px;"> 28 <a href="#"> 29 <img class="diapo" src="Images/6421206420111009170039010.gif" alt="" style="opacity: 0.8; 30 visibility: visible;"></a> 31 <div class="backgroundText" style="top: 232px;"> 32 </div> 33 <div class="text" style="top: 232px;"> 34 <span class="stitle">逆袭</span>金馆长的卖萌</div> 35 </div> 36 <div class="slide" style="left: 290px;"> 37 <a href="#"> 38 <img class="diapo" src="Images/6421206420111008161252052.gif" alt="" style="opacity: 0.8; 39 visibility: visible;"></a> 40 <div class="backgroundText" style="top: 232px;"> 41 </div> 42 <div class="text" style="top: 232px;"> 43 <span class="stitle">电影</span>《浪漫刺客》一样给力</div> 44 </div> 45 <div class="slide" style="left: 390px;"> 46 <a href="#"> 47 <img class="diapo" src="Images/6421206420111108160036015.jpg" alt="" style="opacity: 0.8; 48 visibility: visible;"></a> 49 <div class="backgroundText" style="top: 231px;"> 50 </div> 51 <div class="text" style="top: 231px;"> 52 <span class="stitle">劲敌</span>金馆长的那些表情界对手们</div> 53 </div> 54 <div class="slide" style="left: 490px;"> 55 <a href="#"> 56 <img class="diapo" src="Images/6421206420111101161354091.jpg" alt="" style="opacity: 0.8; 57 visibility: visible;"></a> 58 <div class="backgroundText" style="top: 230px;"> 59 </div> 60 <div class="text" style="top: 230px;"> 61 <span class="stitle">国产</span>与金馆长喜羊羊say"HI"</div> 62 </div> 63 </div> 64 <script src="Scripts/slider.js" type="text/javascript"></script> 65 <script type="text/javascript"> 66 slider.init(); 67 </script> 68 </body> 69 </html>
1 /* ==== slider nameSpace ==== */ 2 var slider = function() { 3 /* ==== private methods ==== */ 4 function getElementsByClass(object, tag, className) { 5 var o = object.getElementsByTagName(tag); 6 for ( var i = 0, n = o.length, ret = []; i < n; i++) { 7 if (o[i].className == className) ret.push(o[i]); 8 } 9 if (ret.length == 1) ret = ret[0]; 10 return ret; 11 } 12 function setOpacity (obj,o) { 13 if (obj.filters) obj.filters.alpha.opacity = Math.round(o); 14 else obj.style.opacity = o / 100; 15 } 16 /* ==== Slider Constructor ==== */ 17 function Slider(oCont, speed, iW, iH, oP) { 18 this.slides = []; 19 this.over = false; 20 this.S = this.S0 = speed; 21 this.iW = iW; 22 this.iH = iH; 23 this.oP = oP; 24 this.oc = document.getElementById(oCont); 25 this.frm = getElementsByClass(this.oc, 'div', 'slide'); 26 this.NF = this.frm.length; 27 this.resize(); 28 for (var i = 0; i < this.NF; i++) { 29 this.slides[i] = new Slide(this, i); 30 } 31 this.oc.parent = this; 32 this.view = this.slides[0]; 33 this.Z = this.mx; 34 /* ==== on mouse out event ==== */ 35 this.oc.onmouseout = function () { 36 this.parent.mouseout(); 37 return false; 38 } 39 } 40 Slider.prototype = { 41 /* ==== animation loop ==== */ 42 run : function () { 43 this.Z += this.over ? (this.mn - this.Z) * .5 : (this.mx - this.Z) * .5; 44 this.view.calc(); 45 var i = this.NF; 46 while (i--) this.slides[i].move(); 47 }, 48 /* ==== resize ==== */ 49 resize : function () { 50 this.wh = this.oc.clientWidth; 51 this.ht = this.oc.clientHeight; 52 this.wr = this.wh * this.iW; 53 this.r = this.ht / this.wr; 54 this.mx = this.wh / this.NF; 55 this.mn = (this.wh * (1 - this.iW)) / (this.NF - 1); 56 }, 57 /* ==== rest ==== */ 58 mouseout : function () { 59 this.over = false; 60 setOpacity(this.view.img, this.oP); 61 } 62 } 63 /* ==== Slide Constructor ==== */ 64 Slide = function (parent, N) { 65 this.parent = parent; 66 this.N = N; 67 this.x0 = this.x1 = N * parent.mx; 68 this.v = 0; 69 this.loaded = false; 70 this.cpt = 0; 71 this.start = new Date(); 72 this.obj = parent.frm[N]; 73 this.txt = getElementsByClass(this.obj, 'div', 'text'); 74 this.img = getElementsByClass(this.obj, 'img', 'diapo'); 75 this.bkg = document.createElement('div'); 76 this.bkg.className = 'backgroundText'; 77 this.obj.insertBefore(this.bkg, this.txt); 78 if (N == 0) this.obj.style.borderLeft = 'none'; 79 this.obj.style.left = Math.floor(this.x0) + 'px'; 80 setOpacity(this.img, parent.oP); 81 /* ==== mouse events ==== */ 82 this.obj.parent = this; 83 this.obj.onmouseover = function() { 84 this.parent.over(); 85 return false; 86 } 87 } 88 Slide.prototype = { 89 /* ==== target positions ==== */ 90 calc : function() { 91 var that = this.parent; 92 // left slides 93 for (var i = 0; i <= this.N; i++) { 94 that.slides[i].x1 = i * that.Z; 95 } 96 // right slides 97 for (var i = this.N + 1; i < that.NF; i++) { 98 that.slides[i].x1 = that.wh - (that.NF - i) * that.Z; 99 } 100 }, 101 /* ==== HTML animation : move slides ==== */ 102 move : function() { 103 var that = this.parent; 104 var s = (this.x1 - this.x0) / that.S; 105 /* ==== lateral slide ==== */ 106 if (this.N && Math.abs(s) > .5) { 107 this.obj.style.left = Math.floor(this.x0 += s) + 'px'; 108 } 109 /* ==== vertical text ==== */ 110 var v = (this.N < that.NF - 1) ? that.slides[this.N + 1].x0 - this.x0 : that.wh - this.x0; 111 if (Math.abs(v - this.v) > .5) { 112 this.bkg.style.top = this.txt.style.top = Math.floor(2 + that.ht - (v - that.Z) * that.iH * that.r) + 'px'; 113 this.v = v; 114 this.cpt++; 115 } else { 116 if (!this.pro) { 117 /* ==== adjust speed ==== */ 118 this.pro = true; 119 var tps = new Date() - this.start; 120 if(this.cpt > 1) { 121 that.S = Math.max(2, (28 / (tps / this.cpt)) * that.S0); 122 } 123 } 124 } 125 if (!this.loaded) { 126 if (this.img.complete) { 127 this.img.style.visibility = 'visible'; 128 this.loaded = true; 129 } 130 } 131 }, 132 /* ==== light ==== */ 133 over : function () { 134 this.parent.resize(); 135 this.parent.over = true; 136 setOpacity(this.parent.view.img, this.parent.oP); 137 this.parent.view = this; 138 this.start = new Date(); 139 this.cpt = 0; 140 this.pro = false; 141 this.calc(); 142 setOpacity(this.img, 100); 143 } 144 } 145 /* ==== public method - script initialization ==== */ 146 return { 147 init : function() { 148 // create instances of sliders here 149 // parameters : HTMLcontainer name, speed (2 fast - 20 slow), Horizontal ratio, vertical text ratio, opacity 150 this.s1 = new Slider("slider", 12, 1.84/3, 1/3.2, 80); 151 setInterval("slider.s1.run();", 16); 152 } 153 } 154 }();
1 /*顶部轮换*/ 2 #slider 3 { 4 position: relative; 5 width: 580px; 6 float: right; 7 padding-right: 20px; 8 height: 230px; 9 overflow: hidden; 10 background: #CCC; 11 border: 5px solid #CCC; 12 display: block; 13 } 14 #slider .slide 15 { 16 position: absolute; 17 top: 0px; 18 height: 230px; 19 width: 370px; 20 overflow: hidden; 21 border-left: #222 solid 1px; 22 cursor: default; 23 } 24 #slider .stitle 25 { 26 color: #F80; 27 font-weight: bold; 28 font-size: 1.2em; 29 margin-right: 1.5em; 30 text-decoration: none; 31 } 32 #slider .backgroundText 33 { 34 position: absolute; 35 width: 100%; 36 height: 100%; 37 top: 100%; 38 background: #000; 39 filter: alpha(opacity=40); 40 opacity: 0.5; 41 } 42 #slider .text 43 { 44 position: absolute; 45 top: 1%; 46 top: 100%; 47 color: #FFF; 48 font-family: verdana, arial, Helvetica, sans-serif; 49 font-size: 12px; 50 width: 320px; 51 left: 10px; 52 height: 70px; 53 overflow: hidden; 54 } 55 #slider .diapo 56 { 57 position: absolute; 58 filter: alpha(opacity=100); 59 opacity: 1; 60 visibility: hidden; 61 }
有空上传一份源码