Skip to content

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

· 技术 · 2 分钟阅读

兼容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 = new Image(); imgs.src = loading; titles = ""; links = "#";}

/* 插入CSS代码 */ var str = ""; 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 += ""; str += ""; str += "Link";

/* 添加图片 */ str += ""; for(var i = 1; i <= count; i++) { str += ""+i+""; } str += ""; str += "";

function SetAlpha(){if(document.all){if(oi.filters && 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.src;document.getElementById("dlink").href = links;document.getElementById("it" + lastid).className = "off";document.getElementById("it" + id).className = "on";document.getElementById("titnv").innerHTML = "" + titles + "";curid = lastid = id;} function ScrollImg(){if(pause && 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.complete == true && imgs.complete == true) {clearInterval(checkid);setTimeout(StartScroll, changeTime);}}

index.php

/functions.js" type="text/javascript">

links = "<?php global $post; echo get_post_meta(198, 'link1', true); ?>"; links = "<?php global $post; echo get_post_meta(198, 'link2', true); ?>"; links = "<?php global $post; echo get_post_meta(198, 'link3', true); ?>"; links = "<?php global $post; echo get_post_meta(198, 'link4', true); ?>";

imgs.src = "<?php global $post; echo get_post_meta(198, 'image1', true); ?>"; imgs.src = "<?php global $post; echo get_post_meta(198, 'image2', true); ?>"; imgs.src = "<?php global $post; echo get_post_meta(198, 'image3', true); ?>"; imgs.src = "<?php global $post; echo get_post_meta(198, 'image4', true); ?>";

titles = "<?php global $post; echo get_post_meta(198, 'title1', true); ?>"; titles = "<?php global $post; echo get_post_meta(198, 'title2', true); ?>"; titles = "<?php global $post; echo get_post_meta(198, 'title3', true); ?>"; titles = "<?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);

Web