兼容各种浏览器的JavaScript图片幻灯片
四 09
兼容IE6,IE7,IE8,Firefox,Maxthon,Safari,Opera.
functions.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 = "<style type='text/css'>";
str += "#imgnv{height:16px;display:inline;}#imgnv div{float:left;margin-right:1px;display:inline;}";
str += "#imgnv div.on,#imgnv div.off{margin-bottom:1px;width:30px;height:15px;line-height:16px!important;font-size:9px;text-align:center;cursor:pointer;cursor:hand}";
str += "#imgnv div.on{background:"+hightColor+";color:"+lowColor+";}";
str += "#imgnv div.off{background:"+lowColor+";color:"+hightColor+";text-decoration:none}";
str += "#titnv{color:"+titleColor+";text-align:center;font-weight:bold;margin-top:5px;}";
str += "</style>";
str += "<div style='position:relative;border:1px solid #FFF'>";
str += "<div><a id='dlink' href='#'><img id='dimg' src='" + loading + "' border='0' width='" + imageWidth + "' height='"+imageHeight+"' style='filter:Alpha(opacity=100)' onmouseover='Pause(true)' onmouseout='Pause(false)'></a></div>";
/* 添加图片 */
str += "<div id='imgnv'>";
for(var i = 1; i <= count; i++)
{
str += "<div id='it"+i+"' class='";
if(i == 1) str += "on"; else str += "off";
str += "' onmouseover='ImgSwitch("+i+", true)' onmouseout='Pause(false)'>"+i+"</div>";
}
str += "</div><div id='titnv'></div>";
str += "</div>";
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 = "<strong>" + titles[id] + "</strong>";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);}}
index.php
<script src="<?php bloginfo('template_directory') ?>/functions.js" type="text/javascript"></script>
<script type="text/javascript">
links[1] = "<?php global $post; echo get_post_meta(198, 'link1', true); ?>";
links[2] = "<?php global $post; echo get_post_meta(198, 'link2', true); ?>";
links[3] = "<?php global $post; echo get_post_meta(198, 'link3', true); ?>";
links[4] = "<?php global $post; echo get_post_meta(198, 'link4', true); ?>";
imgs[1].src = "<?php global $post; echo get_post_meta(198, 'image1', true); ?>";
imgs[2].src = "<?php global $post; echo get_post_meta(198, 'image2', true); ?>";
imgs[3].src = "<?php global $post; echo get_post_meta(198, 'image3', true); ?>";
imgs[4].src = "<?php global $post; echo get_post_meta(198, 'image4', true); ?>";
titles[1] = "<?php global $post; echo get_post_meta(198, 'title1', true); ?>";
titles[2] = "<?php global $post; echo get_post_meta(198, 'title2', true); ?>";
titles[3] = "<?php global $post; echo get_post_meta(198, 'title3', true); ?>";
titles[4] = "<?php global $post; echo get_post_meta(198, 'title4', true); ?>";
document.write(str);
var oi = document.getElementById("dimg");
var pause = false;
var curid = 1;
var lastid = 1;
var sw = 1;
var opacity = 100;
var speed = 15;
var delay = (document.all)? 400:700;
var checkid = setInterval(CheckLoad, 10);
</script>
