兼容各种浏览器的JavaScript图片幻灯片

兼容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 += "
“+i+”

“;
}
str += “

“;
str += “

“;

function SetAlpha(){if(document.all){if(oi.filters &amp;amp;&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;&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;&amp;amp; imgs[2].complete == true) {clearInterval(checkid);setTimeout(StartScroll, changeTime);}}
[/code]

index.php

[code=’js’]


[/code]

1 comment

  1. 找到你老窝了.

    这个幻灯提点意见

    1,注意语意化,幻灯里的内容作为页面强调的部分,数据应该是html的.
    2,同上一个问题,注意分离,HTML和CSS还是拿出来好一些,在没有JS的情况下这个幻灯区域看起来也应该是正常的,只是静止了而已.
    3,封装的问题,稍微封装一下吧,全局变量太多,并且目前的架构很难在这个页面上同时输出1个以上的幻灯.

发表评论