兼容IE6,IE7,IE8,Firefox,Maxthon,Safari,Opera.
functions.js
[code=’js’]
/* 存储参数 */
var links = new Array();
var imgs = new Array();
var titles = new Array();
/* 显示参数 */
var imageWidth = 457;//图片宽度
var imageHeight = 210;//图片高度
var loading = “http://www.zainanfang.com/wp-content/themes/zainanfang/images/loading.png”;//加载中图片
var hightColor = “#CF9262”;//高亮色彩
var lowColor = “#F5F8F3”;//低亮色彩
var titleColor = “#000”;//题目文字色彩
/* 控制参数 */
var count = 4;//图片个数
var changeTime = 2000;//切换时间,单位毫秒
/* 初始化容器 */
for(var i = 1; i <= count; i++) { imgs[i] = new Image(); imgs[i].src = loading; titles[i] = ""; links[i] = "#";}
/* 插入CSS代码 */
var str = "
“;
str += “
str += “
“;
/* 添加图片 */
str += “
for(var i = 1; i <= count; i++) { str += "
“;
}
str += “
“;
str += “
“;
function SetAlpha(){if(document.all){if(oi.filters &amp;&amp; oi.filters.Alpha) oi.filters.Alpha.opacity = opacity;}else{oi.style.MozOpacity = ((opacity >= 100)? 99:opacity) / 100;}}
function ImgSwitch(id, p){if(p){pause = true;opacity = 100;SetAlpha();}oi.src = imgs[id].src;document.getElementById(“dlink”).href = links[id];document.getElementById(“it” + lastid).className = “off”;document.getElementById(“it” + id).className = “on”;document.getElementById(“titnv”).innerHTML = “” + titles[id] + ““;curid = lastid = id;}
function ScrollImg(){if(pause &amp;&amp; opacity >= 100) return;if(sw == 0){opacity += 2;if(opacity > delay){ opacity = 100; sw = 1; }}if(sw == 1){opacity -= 3;if(opacity < 10){ opacity = 10; sw = 3; }}SetAlpha();if(sw != 3) return;sw = 0;curid++; if(curid > count) curid = 1;ImgSwitch(curid, false);}
function Pause(s){pause = s;}
function StartScroll(){setInterval(ScrollImg, speed);}
function CheckLoad(){if (imgs[1].complete == true &amp;&amp; imgs[2].complete == true) {clearInterval(checkid);setTimeout(StartScroll, changeTime);}}
[/code]
index.php
[code=’js’]
[/code]
找到你老窝了.
这个幻灯提点意见
1,注意语意化,幻灯里的内容作为页面强调的部分,数据应该是html的.
2,同上一个问题,注意分离,HTML和CSS还是拿出来好一些,在没有JS的情况下这个幻灯区域看起来也应该是正常的,只是静止了而已.
3,封装的问题,稍微封装一下吧,全局变量太多,并且目前的架构很难在这个页面上同时输出1个以上的幻灯.