<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>四屏带缩略图的焦点图代码</title>
<style type="text/css">
img {border:0px}
.fpic{
width:326px;
height:334px;
POSITION: relative;
}
#focpic{
width:322px;
height:240px;
border:#ECC1A1 1px solid;
position: absolute;
FILTER: RevealTrans(duration = 1,transition=12);
left: 1px;
top: 1px;
}
.fpic div{
Z-INDEX: 20;
CURSOR:pointer;
padding-top:4px;
POSITION: absolute;
TOP: 242px;
WIDTH: 78px;
HEIGHT: 58px;
}
.fpic img{
width:78px;
height:58px;
}
.fpic a:link img,.fpic a:visited img{
padding:1px;
border:#FFFFFF 1px solid;
}
.fpic a:hover img,.fpic a:active img{
padding:1px;
border:#4A8109 1px solid;
}
#tmb0 {LEFT: 0px;}
#tmb1 {LEFT: 82px;}
#tmb2 {LEFT: 164px;}
#tmb3 {LEFT: 246px;}
#fttltxt {
    color: #3399CC;
    left:0;
    Z-INDEX: 21;
CURSOR:pointer;
text-align:center;
padding-top:70px;
POSITION: absolute;
TOP: 242px;
WIDTH: 322px;
HEIGHT: 30px;}
#fttltxt a:link, a:visited { color: #3399CC; text-decoration: none; font-weight: normal; } 
#fttltxt a:active, a:hover { color: #073475; text-decoration: underline; }
</style>
<script language="javascript" type="text/javascript" >
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();
 stopit();
}function playnext(){
 if(currslid==3){
  currslid = 0;
 }
 else{
  currslid++;
 };
 setfoc(currslid);
 playit();
}
function playit(){
 slidint = setTimeout(playnext,4500);
}
function stopit(){
 clearTimeout(slidint);
 }
window.onload = function(){
 playit();
}
</script>
</head><body>
<DIV align="center" >
<DIV class="fpic"><A id="foclnk" 
href="#"><IMG id="focpic"  src="images/l01.jpg"></A>
<DIV class="thubpiccur" id="tmb0" onmouseover="setfoc(0)"; onmouseout="playit()";><A href="#"><IMG alt="" src="images/l01.jpg"></A></DIV>
<DIV class="thubpic" id="tmb1" onmouseover="setfoc(1)"; onmouseout="playit()";><A href="#"><IMG src="images/l02.jpg"></A></DIV>
<DIV class="thubpic"  id="tmb2" onmouseover="setfoc(2)"; onmouseout="playit()";><A href="#"><IMG src="images/l03.jpg"></A></DIV>
<DIV class="thubpic" id="tmb3" onmouseover="setfoc(3)"; onmouseout="playit()";><A href="#"><IMG src="images/l04.jpg"></A></DIV><div id="fttltxt">标题1</div></DIV>
<p>
  <SCRIPT language="javascript" type="text/javascript">
  <!--
  var picarry = {};var lnkarry = {};var ttlarry = {};
picarry[0] = "images/l01.jpg";lnkarry[0] = "#";ttlarry[0] = "标题1";picarry[1] = "images/l02.jpg";lnkarry[1] = "#";ttlarry[1] = "标题2";picarry[2] = "images/l03.jpg";lnkarry[2] = "#";ttlarry[2] = "标题3";picarry[3] = "images/l04.jpg";lnkarry[3] = "#";ttlarry[3] = "标题4";
//-->
</SCRIPT>
</p>
</div>
</body>
</html>

解决方案 »

  1.   

    focpic.style.visibility = "visible";
    这是典型的IE写法,W3C标准请用DOCUMENT.GETELEMENTBYID(“”)
    另外FF对滤镜的支持部是很好,只支持小部分滤镜效果,
      

  2.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script language="javascript">
    var num=1;
    function loop(){
    for (var i=1; i<=3;i++) {
    if (i==num) {
    document.getElementById("pic"+i).style.display="block";
    document.getElementById("m"+i).className="active";
    }else {
    document.getElementById("pic"+i).style.display="none";
    document.getElementById("m"+i).className="";
    }
    }
    num++;
    if (num>3) {
    num=1;
    }setTimeout("loop()",1000);
    }function show(id,n,menu,box) {
    for (var i=1;i<n;i++) {
    if(i==id) {
    document.getElementById(menu+i).className="active";
    document.getElementById(box+i).style.display="block";
    }else {
    document.getElementById(menu+i).className="";
    document.getElementById(box+i).style.display="none";
    }
    }
    }</script></head>
    <style type="text/css">
    .active { font-weight:bold; color:#f00;}
    </style>
    <body onload="loop();"><div id="pic1">1</div>
    <div id="pic2" style="display:none;">2</div>
    <div id="pic3" style="display:none;">3</div>
    <ul>
    <li id="m1" onclick="show('1','4','m','pic')">1</li>
    <li id="m2" onclick="show('2','4','m','pic')">2</li>
    <li id="m3" onclick="show('3','4','m','pic')">3</li>
    </ul>
    </body>
    </html>
      

  3.   

    可以帮我改一下吗,我怎么改在IE里都是好的,到FIREFOX里就不动了,或者偶尔动一下
      

  4.   

    换成这个效果吧:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title> Slider </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    body, td, ul, li { margin:0; padding:0 }
    table { border-collapse: collapse; border-spacing:0 }
    #container { width:610px; height:205px; position:relative; overflow: hidden; margin:0 auto; }
    #scroller { position:absolute; }
    #page { position: absolute; float:right; left:520px; top:180px;}
    #page li { float:left; cursor:pointer; list-style:none; width:15px; height:15px; line-height:15px; font-family:Arial; font-size:12px; margin:1px; text-align:center;background:url("http://pc.qq.com/pc/images/flashbutton.gif") no-repeat scroll -15px 0 transparent;}
    #page li.on {background:url("http://pc.qq.com/pc/images/flashbutton.gif") no-repeat scroll 0 0 transparent;color:#FFFFFF;}
    img{ border:0;}
    </style>
    </head>
    <body>
    <div id="container">
    <table id="scroller" >
    <tr>
    <td><a href="http://www.websjy.com"><img src="http://inncache.soso.com/pc/images/manage.jpg" border="0" /></a></td>
    <td><a href="http://www.websjy.com"><img src="http://inncache.soso.com/pc/images/py.jpg" /></a></td>
    <td><a href="http://www.websjy.com"><img src="http://inncache.soso.com/pc/images/player.jpg" /></a></td>
    <td><a href="http://www.websjy.com"><img src="http://inncache.soso.com/pc/images/xf.jpg" /></a></td>
    <td><a href="http://www.websjy.com"><img src="http://inncache.soso.com/pc/images/TT.jpg" /></a></td>
    </tr>
    </table>
    <ul id="page"></ul>
    </div>
    <script>
    var QQ = function() {
    // 公用函数
    function T$(id) { return document.getElementById(id); }
    function T$$(root, tag) { return (root || document).getElementsByTagName(tag); }
    function $extend(des, src) { for(var p in src) { des[p] = src[p]; } return des; }
    function $each(arr, callback, thisp) {
    if (arr.forEach) {arr.forEach(callback, thisp);}
    else { for (var i = 0, len = arr.length; i < len; i++) callback.call(thisp, arr[i], i, arr);}
    }
    function currentStyle(elem, style) {
    return elem.currentStyle || document.defaultView.getComputedStyle(elem, null);
    }
    // 缓动类
    var Tween = {
    Quart: {
    easeOut: function(t,b,c,d){
    return -c * ((t=t/d-1)*t*t*t - 1) + b;
    }
    },
    Back: {
    easeOut: function(t,b,c,d,s){
    if (s == undefined) s = 1.70158;
    return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
    }
    },
    Bounce: {
    easeOut: function(t,b,c,d){
    if ((t/=d) < (1/2.75)) {
    return c*(7.5625*t*t) + b;
    } else if (t < (2/2.75)) {
    return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
    } else if (t < (2.5/2.75)) {
    return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
    } else {
    return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
    }
    }
    }
    }
    // 主类构造函数
    var scrollTrans = function(cid, sid, count, config) {
    var self = this;
    if (!(self instanceof scrollTrans)) {
    return new scrollTrans(cid, sid, count, config);
    }
    self.container = T$(cid);
    self.scroller = T$(sid);
    if (!(self.container || self.scroller)) {
    return;
    }
    self.config = $extend(defaultConfig, config || {});
    self.index = 0;
    self.timer = null;
    self.count = count;
    self.step = self.scroller.offsetWidth / count;
    };
    // 默认配置
    var defaultConfig = {
    trigger: 1, // 触发方式1:click other: mouseover
    auto: true, // 是否自动切换
    tween: Tween.Quart.easeOut, // 默认缓动类
    Time: 10, // 滑动延时
    duration: 50, // 切换时间
    pause: 3000, // 停顿时间
    start: function() {}, // 切换开始执行函数
    end: function() {} // 切换结束执行函数
    };
    scrollTrans.prototype = {
    constructor: scrollTrans,
    transform: function(index) {
    var self = this;
    index == undefined && (index = self.index);
    index < 0 && (index = self.count - 1) || index >= self.count && (index = 0);
    self.time = 0;
    self.target = -Math.abs(self.step) * (self.index = index);
    self.begin = parseInt(currentStyle(self.scroller)['left']);
    self.change = self.target - self.begin;
    self.duration = self.config.duration;
    self.start();
    self.run();
    },
    run: function() {
    var self = this;
    clearTimeout(self.timer);
    if (self.change && self.time < self.duration) {
    self.moveTo(Math.round(self.config.tween(self.time++, self.begin, self.change, self.duration)));
    self.timer = setTimeout(function() {self.run()}, self.config.Time);
    } else {
    self.moveTo(self.target);
    self.config.auto && (self.timer = setTimeout(function() {self.next()}, self.config.pause));
    }
    },
    moveTo: function(i) {
    this.scroller.style.left = i + 'px';
    },
    next: function() {
    this.transform(++this.index);
    }
    };
    return {
    scroll: function(cid, sid, count, config) {
    window.onload = function() {
    var frag = document.createDocumentFragment(),
    nums = [];
    for (var i = 0; i < count; i++) {
    var li = document.createElement('li');
    (nums[i] = frag.appendChild(document.createElement('li'))).innerHTML = i + 1;
    }
    T$('page').appendChild(frag);
    // 调用主类
    var st = scrollTrans(cid, sid, count, config);
    $each(nums, function(o, i) {
    o[st.config.trigger == 1 ? 'onclick' : 'onmouseover'] = function() { o.className = 'on'; st.transform(i); }
    o.onmouseout = function() { o.className = ''; st.transform();}
    });
    st.start = function() {
    $each(nums, function(o, i) {
    o.className = st.index == i ? 'on' : '';
    });
    };
    st.transform();
    }
    }
    }
    }();
    QQ.scroll('container' /*外部容器ID*/, 'scroller'/*滑动容器ID*/, 5/*切换图片数目*/, {trigger: 0} /*默认配置*/);
    </script>
    </body>
    </html>