当前位置:编程学习 > JS >>

请JS高手帮忙解决问题,一个焦点图代码在Google浏览器下不能正常显示

下面是我在网上找的一段焦点图代码,在IE和火狐下可以正常显示,但是在谷歌浏览器下不能显示大图(小图和标题可以显示) 请帮我看一下是什么原因。 <div class=fpic> <a id="foclnk" href="#"> <img id="focpic" style="filter:revealtrans ( duration = 1,transition=12 ); visibility:visible; position:absolute" height=197 alt="" src="images/01.jpg" width=240> </a> <div id=fttlbg></div> <div id="fttltxt"><a href="#">标题零</a></div> <div class="thubpiccur" id="tmb0" onmouseover="setfoc(0);" onmouseout="playit();"> <a href="#"><img height=46 alt="" src="images/01.jpg" width=56></a> </div> <div class="thubpic" id="tmb1" onmouseover="setfoc(1);" onmouseout="playit();"> <a href="#"><img height=46 alt="" src="images/02.jpg" width=56></a> </div> <div class=thubpic id=tmb2 onmouseover=setfoc(2); onmouseout=playit();> <a href="#"><img height=46 alt="" src="images/03.jpg" width=56></a> </div> <div class=thubpic id=tmb3 onmouseover=setfoc(3); onmouseout=playit();> <a href="#"><img height=46 alt="" src="images/04.jpg" width=56></a> </div> </div> <script language=javascript type=text/javascript> var picarry = {}; var lnkarry = {}; var ttlarry = {}; picarry[0] = "images/01.jpg"; lnkarry[0] = "#"; ttlarry[0] = "# 标题1"; picarry[1] = "images/02.jpg"; lnkarry[1] = "#"; ttlarry[1] = "# 标题2"; picarry[2] = "images/03.jpg"; lnkarry[2] = "#"; ttlarry[2] = "# 标题3"; picarry[3] = "images/04.jpg"; lnkarry[3] = "#"; ttlarry[3] = "# 标题4"; var currslid = 0; var slidint; function setfoc(id){ document.getElementById("focpic").src = picarry[id]; document.getElementById("foclnk").href = lnkarry[id]; document.getElementById("fttltxt").innerHTML = "<a href=\""+lnkarry[id]+"\" target=_blank>"+ttlarry[id]+"</a>"; currslid = id; for(i=0;i<4;i++){ document.getElementById("tmb"+i).className = "thubpic"; }; document.getElementById("tmb"+id).className ="thubpiccur"; focpic.style.visibility = "hidden"; focpic.filters[0].Apply(); if (focpic.style.visibility == "visible") { focpic.style.visibility = "hidden"; focpic.filters.revealTrans.transition=12; } else { focpic.style.visibility = "visible"; focpic.filters[0].transition=12; } focpic.filters[0].Play(); } function playnext(){ if(currslid==3){ currslid = 0; }else{ currslid++; }; setfoc(currslid); }; function playit(){ //slidint = setInterval(playnext,3500); }; function stopit(){ clearInterval(slidint); }; </script>
答案:试试这个图片切换
有12345数字一起切换
鼠标点一下数字会变换到另一张图片,不点就会自动换
里面有教程和源码
其他:ff,gg不显示是因为不支持filters滤镜,所以改为透明载入的方式实现。
页面刚载入的时候也没有轮播,鼠标over的时候也没有停止轮播,以上错误我都已改正。
我是豪情,豪情就是我。

var picarry = [];
var lnkarry = [];
var ttlarry = [];
picarry[0] = "images/01.jpg";
lnkarry[0] = "#";
ttlarry[0] = "# 标题1";
picarry[1] = "images/02.jpg";
lnkarry[1] = "#";
ttlarry[1] = "# 标题2";
picarry[2] = "images/03.jpg";
lnkarry[2] = "#";
ttlarry[2] = "# 标题3";
picarry[3] = "images/04.jpg";
lnkarry[3] = "#";
ttlarry[3] = "# 标题4";

var currslid = 0;
var slidint;

/**
 * 设置透明度
 * @param {Object} elem
 * @param {Object} level (0-100)
 */
function setOpacity(elem, level){
	if(elem.filters){ //如果是IE
		elem.style.filter = 'alpha(opacity=' + level + ')';
		elem.style.zoom = 1;
	} else { //否则是W3C
		elem.style.opacity = level / 100;
	}
}


/**
 * 透明度渐显 From: http://mrthink.net/js-fadein-fadeout-fadeto/
 * @param {Object} elem
 * @param {Number} speed 淡入速度,正整数(可选)
 * @param {Number} opacity 淡入到指定的透明度,0~100(可选)
 */
function fadeInThink(elem, speed, opacity){
	speed = speed || 20;
	opacity = opacity || 100;
	
	//show(elem);
	setOpacity(elem, 0);
	//初始化透明度变化值为0
	var val = 0;
	//循环将透明值以5递增,即淡入效果
	(function(){
		setOpacity(elem, val);
		val += 5;
		if (val <= opacity) {
			setTimeout(arguments.callee, speed)
		}
	})();
}

function setfoc(id) {
	stopit();
	
	var focpic = document.getElementById("focpic");
	focpic.src = picarry[id];
	document.getElementById("foclnk").href = lnkarry[id];
	document.getElementById("fttltxt").innerHTML = "<a href=\"" + lnkarry[id] + "\" target=_blank>" + ttlarry[id] + "</a>";
	//currslid = id;
	for (i = 0; i < 4; i++) {
		document.getElementById("tmb" + i).className = "thubpic";
	};
	document.getElementById("tmb" + id).className = "thubpiccur";
	
	
	if(focpic.filters){
		focpic.style.visibility = "hidden";
		focpic.filters[0].Apply();
		if (focpic.style.visibility == "visible") {
			focpic.style.visibility = "hidden";
			focpic.filters.revealTrans.transition = 12;
		}
		else {
			focpic.style.visibility = "visible";
			focpic.filters[0].transition = 12;
		}
		focpic.filters[0].Play();
	} else {
		fadeInThink(focpic);
	}
}
function playnext() {
	if (currslid == 3) {
		currslid = 0;
	} else {
		currslid++;
	};
	setfoc(currslid);
	playit();
};
function playit() {
	slidint = setTimeout(playnext,2000);
};
function stopit() {
	clearTimeout(slidint);
};	
playit();

上一个:求js高手写个特效
下一个:飘浮广告JS问题。。。

CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,