这是个js焦点图效果,鼠标单击到文字层上,切换到相应的图片。鼠标不点,可以自己按时间间隔自动轮换。有收藏这样代码的就拿出来吧,呵呵

解决方案 »

  1.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
     </HEAD> <BODY style="padding:0;margin:0" onload="init()">
     <style>
    .block {color:white; font-size:12px; width:100px; height:50px; float:left; text-align:center; padding-top:20px; z-index:5; border-left:1px solid white; cursor:pointer;background:#000000; filter:alpha(opacity=30);}
     </style>
      <img id="pic" width="400px" height="300px" style="border:1px solid gray; margin-left:10" src="">
      <div id="track" style="position:absolute; top:250; left:10; height:50px; width:400px;; z-index:2"></div>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var arr = [];
    arr[0]=['谷歌','http://www.google.com.hk/intl/zh-CN/images/logo_cn.png'];
    arr[1]=['百度','http://www.baidu.com/img/baidu_logo.gif'];
    arr[2]=['新浪','http://i1.sinaimg.cn/home/deco/2009/0330/logo_home.gif'];
    arr[3]=['网易','http://img3.cache.netease.com/www/logo/logo_png.png'];
    setInterval('loop()',3000);
    function init(){
    document.getElementById("pic").src = arr[0][1];
    for (var i=0; i<arr.length; i++)
    {
    var div1 = document.createElement("div");
    div1.innerHTML = arr[i][0];
    div1.param = arr[i][1];
    div1.onclick = function (){fun(this)};
    div1.className = "block";
    if (i==0) div1.style.filter = "alpha(opacity=50)";
    document.getElementById("track").appendChild(div1);
    }
    window.cur = document.getElementById("track").firstChild;
    }
    function fun(obj){
    document.getElementById("pic").src = obj.param;
    obj.style.filter = "alpha(opacity=50)";
    window.cur.style.filter = "alpha(opacity=30)";
    window.cur = obj;
    }
    function loop(){
    if (window.cur.nextSibling) window.cur.nextSibling.click();
    else document.getElementById("track").firstChild.click();
    }
    //-->
    </SCRIPT>
     </BODY>
    </HTML>
      

  2.   

    利用myFocus 自己解决了 还是感谢大家的热情回答