以文本方式查看主题 - 搭建论坛 (http://bbs.diylsoft.com:8118/starforum/index.asp) -- 用户服务 (http://bbs.diylsoft.com:8118/starforum/list.asp?boardid=2) ---- [分享]搞破坏搭建者技巧五 广告的切换(建议高级用户) (http://bbs.diylsoft.com:8118/starforum/dispbbs.asp?boardid=2&id=30555) |
-- 作者:梁鹏 -- 发布时间:2010-8-9 19:21:49 -- [分享]搞破坏搭建者技巧五 广告的切换(建议高级用户) 怎么说呢 许多时候 许多人 许多应用 需要这个效果
一个广告 切换效果 一个可以完全控制他的后台
我一直在用 一直没有改变
开始 到 终点 我屡次失败 屡次露出笑容
因为不是所有的代码多可以在搭建者中使用的
不多说了 送给需要的朋友
以下内容为程序代码: 1 <style> 2 BODY { 3 PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px 4 } 5 UL { 6 PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px 7 } 8 .container { 9 WIDTH: 948px; HEIGHT: 350px 10 } 11 .container A IMG { 12 WIDTH: 948px; HEIGHT: 350px 13 } 14 .container IMG { 15 BORDER-BOTTOM-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-TOP-STYLE: none; BORDER-LEFT-STYLE: none 16 } 17 .td_f A IMG { 18 PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px 19 } 20 .num { 21 POSITION: absolute; WIDTH: 90px; FLOAT: right; TOP: 325px; LEFT: 850px} 22 .num LI { 23 TEXT-ALIGN: center; LINE-HEIGHT: 15px; LIST-STYLE-TYPE: none; MARGIN: 1px; WIDTH: 15px; FONT-FAMILY: Arial; BACKGROUND: url(http://192.168.1.190:800/Files/Program%20Files/WebBuilder/szjdhssy/img/jpg/flashbutton.gif) no-repeat -15px 0px; FLOAT: left; HEIGHT: 15px; COLOR: #86a2b8; FONT-SIZE: 12px; CURSOR: pointer 24 } 25 .num LI.on { 26 LINE-HEIGHT: 15px; WIDTH: 15px; BACKGROUND: url(http://192.168.1.190:800/Files/Program%20Files/WebBuilder/szjdhssy/img/jpg/flashbutton.gif) no-repeat; HEIGHT: 15px; COLOR: #ffffff 27 } 28 .more { 29 FLOAT: right 30 } 31 .more1 A { 32 TEXT-ALIGN: left; LINE-HEIGHT: 25px; MARGIN: 0px 0px 0px 10px; COLOR: #3373a3 33 } 34 </style> 35 <SCRIPT language=javascript> 36 if(typeof(pgvMain) == \'function\') 37 pgvMain(); 38 </SCRIPT> 39 <SCRIPT> 40 var gtopTab="one"; 41 function $id(id){ 42 return document.getElementById(id); 43 } 44 function changesTab(tab_id){ 45 if (tab_id==gtopTab){ 46 return; 47 }else{ 48 $id(gtopTab).className="unselect"; 49 $id(tab_id).className="select"; 50 $id("tab_"+gtopTab).style.display="none"; 51 $id("tab_"+tab_id).style.display="block"; 52 gtopTab=tab_id; 53 } 54 } 55 </SCRIPT> 56 <SCRIPT type=text/javascript> 57 var $ = function (id) { 58 return "string" == typeof id ? document.getElementById(id) : id; 59 }; 60 var Extend = function(destination, source) { 61 for (var property in source) { 62 destination[property] = source[property]; 63 } 64 return destination; 65 } 66 var CurrentStyle = function(element){ 67 return element.currentStyle || document.defaultView.getComputedStyle(element, null); 68 } 69 var Bind = function(object, fun) { 70 var args = Array.prototype.slice.call(arguments).slice(2); 71 return function() { 72 return fun.apply(object, args.concat(Array.prototype.slice.call(arguments))); 73 } 74 } 75 var Tween = { 76 Quart: { 77 easeOut: function(t,b,c,d){ 78 return -c * ((t=t/d-1)*t*t*t - 1) + b; 79 } 80 }, 81 Back: { 82 easeOut: function(t,b,c,d,s){ 83 if (s == undefined) s = 1.70158; 84 return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; 85 } 86 }, 87 Bounce: { 88 easeOut: function(t,b,c,d){ 89 if ((t/=d) < (1/2.75)) { 90 return c*(7.5625*t*t) + b; 91 } else if (t < (2/2.75)) { 92 return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; 93 } else if (t < (2.5/2.75)) { 94 return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; 95 } else { 96 return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; 97 } 98 } 99 } 100 } 101 //容器对象,滑动对象,切换数量 102 var SlideTrans = function(container, slider, count, options) { 103 this._slider = $(slider); 104 this._container = $(container);//容器对象 105 this._timer = null;//定时器 106 this._count = Math.abs(count);//切换数量 107 this._target = 0;//目标值 108 this._t = this._b = this._c = 0;//tween参数 109 110 this.Index = 0;//当前索引 111 112 this.SetOptions(options); 113 114 this.Auto = !!this.options.Auto; 115 this.Duration = Math.abs(this.options.Duration); 116 this.Time = Math.abs(this.options.Time); 117 this.Pause = Math.abs(this.options.Pause); 118 this.Tween = this.options.Tween; 119 this.onStart = this.options.onStart; 120 this.onFinish = this.options.onFinish; 121 122 var bVertical = !!this.options.Vertical; 123 this._css = bVertical ? "top" : "left";//方向 124 125 //样式设置 126 var p = CurrentStyle(this._container).position; 127 p == "relative" || p == "absolute" || (this._container.style.position = "relative"); 128 this._container.style.overflow = "hidden"; 129 this._slider.style.position = "absolute"; 130 131 this.Change = this.options.Change ? this.options.Change : 132 this._slider[bVertical ? "offsetHeight" : "offsetWidth"] / this._count; 133 }; 134 SlideTrans.prototype = { 135 //设置默认属性 136 SetOptions: function(options) { 137 this.options = {//默认值 138 Vertical: true,//是否垂直方向(方向不能改) 139 Auto: true,//是否自动 140 Change: 0,//改变量 141 Duration: 50,//滑动持续时间 142 Time: 10,//滑动延时 143 Pause: 4000,//停顿时间(Auto为true时有效) 144 onStart: function(){},//开始转换时执行 145 onFinish: function(){},//完成转换时执行 146 Tween: Tween.Quart.easeOut//tween算子 147 }; 148 Extend(this.options, options || {}); 149 }, 150 //开始切换 151 Run: function(index) { 152 //修正index 153 index == undefined && (index = this.Index); 154 index < 0 && (index = this._count - 1) || index >= this._count && (index = 0); 155 //设置参数 156 this._target = -Math.abs(this.Change) * (this.Index = index); 157 this._t = 0; 158 this._b = parseInt(CurrentStyle(this._slider)[this.options.Vertical ? "top" : "left"]); 159 this._c = this._target - this._b; 160 161 this.onStart(); 162 this.Move(); 163 }, 164 //移动 165 Move: function() { 166 clearTimeout(this._timer); 167 //未到达目标继续移动否则进行下一次滑动 168 if (this._c && this._t < this.Duration) { 169 this.MoveTo(Math.round(this.Tween(this._t++, this._b, this._c, this.Duration))); 170 this._timer = setTimeout(Bind(this, this.Move), this.Time); 171 }else{ 172 this.MoveTo(this._target); 173 this.Auto && (this._timer = setTimeout(Bind(this, this.Next), this.Pause)); 174 } 175 }, 176 //移动到 177 MoveTo: function(i) { 178 this._slider.style[this._css] = i + "px"; 179 }, 180 //下一个 181 Next: function() { 182 this.Run(++this.Index); 183 }, 184 //上一个 185 Previous: function() { 186 this.Run(--this.Index); 187 }, 188 //停止 189 Stop: function() { 190 clearTimeout(this._timer); this.MoveTo(this._target); 191 } 192 }; 193 </SCRIPT> 194 <BODY> 195 <DIV id=idContainer2 class=container> 196 <TABLE id=idSlider2 border=0 cellSpacing=0 cellPadding=0> 197 <TBODY> 198 <TR> 199 <TD class=td_f><a href="#"><img src="http://192.168.1.190:800/Files/Program%20Files/WebBuilder/szjdhssy/img/jpg/gg1.jpg"></a></TD> 200 <TD class=td_f><a href="#"><img src="http://192.168.1.190:800/Files/Program%20Files/WebBuilder/szjdhssy/img/jpg/gg2.jpg"></a></TD> 201 <TD class=td_f><A href="#"><IMG src="http://192.168.1.190:800/Files/Program%20Files/WebBuilder/szjdhssy/img/jpg/gg3.jpg"></A></TD> 202 <TD class=td_f><A href="#"><IMG src="http://192.168.1.190:800/Files/Program%20Files/WebBuilder/szjdhssy/img/jpg/gg4.jpg"></A></TD> 203 <TD class=td_f><A href="#"><IMG src="http://192.168.1.190:800/Files/Program%20Files/WebBuilder/szjdhssy/img/jpg/gg5.jpg"></A></TD> 204 </TR> 205 </TBODY> 206 </TABLE> 207 <UL id=idNum class=num> 208 </UL> 209 </DIV> 210 <SCRIPT> 211 //new SlideTrans("idContainer", "idSlider", 3).Run(); 212 /////////////////////////////////////////////////////////// 213 var forEach = function(array, callback, thisObject){ 214 if(array.forEach){ 215 array.forEach(callback, thisObject); 216 }else{ 217 for (var i = 0, len = array.length; i < len; i++) { callback.call(thisObject, array[i], i, array); } 218 } 219 } 220 var st = new SlideTrans("idContainer2", "idSlider2", 5, { Vertical: false }); 221 var nums = []; 222 //插入数字 223 for(var i = 0, n = st._count - 1; i <= n;){ 224 (nums[i] = $("idNum").appendChild(document.createElement("li"))).innerHTML = ++i; 225 } 226 forEach(nums, function(o, i){ 227 o.onmouseover = function(){ o.className = "on"; st.Auto = false; st.Run(i); } 228 o.onmouseout = function(){ o.className = ""; st.Auto = true; st.Run(); } 229 }) 230 //设置按钮样式 231 st.onStart = function(){ 232 forEach(nums, function(o, i){ o.className = st.Index == i ? "on" : ""; }) 233 } 234 //$("idAuto").onclick = function(){ 235 //if(st.Auto){ 236 //st.Auto = false; st.Stop(); this.value = "自动"; 237 //}else{ 238 //st.Auto = true; st.Run(); this.value = "停止"; 239 //} 240 //} 241 //$("idNext").onclick = function(){ st.Next(); } 242 //$("idPre").onclick = function(){ st.Previous(); } 243 //$("idTween").onchange = function(){ 244 //switch (parseInt(this.value)){ 245 //case 2 : 246 //st.Tween = Tween.Bounce.easeOut; break; 247 //case 1 : 248 //st.Tween = Tween.Back.easeOut; break; 249 //default : 250 //st.Tween = Tween.Quart.easeOut; 251 //} 252 //} 253 st.Run(); 254 </SCRIPT> |