请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问题。。。