焦点图

 

 



 

结构

<div class="left_1">

 

————大图容器————

 

      <div id="focus_img" onmouseover="stopauto()" onmouseout="setauto()">

        <div id="m1"><a href="#" target="_blank"><img src="images/1.jpg" /></a></div>

        <div id="m2" style="display:none"><a href="#" target="_blank"><img src="images/2.jpg" /></a></div>

        <div id="m3" style="display:none"><a href="#" target="_blank"><img src="images/3.jpg" /></a></div>

 

…………

 

      </div>

 

————半透明背景————

 

      <div class="focus_bg"></div>

 

————标题容器————

 

      <div id="focus_txt" onmouseover="stopauto()" onmouseout="setauto()">

        <div id="t1">这里显示标题</div>

        <div id="t2" style="display:none">这里显示标题</div>

        <div id="t3" style="display:none">这里显示标题</div>

 

…………

 

      </div>

 

————按钮容器————

 

      <div id="focus_btn" onmouseover="stopauto()" onmouseout="setauto()">

        <div id="focus_btn2">

          <div id="b1" onmouseover="getimg(1)" class="selected"><a href="#" target="_blank">按钮一</a></div>

          <div id="b2" onmouseover="getimg(2)"><a href="#" target="_blank">按钮二</a></div>

          <div id="b3" onmouseover="getimg(3)"><a href="#" target="_blank">按钮三</a></div>

 

…………

 

        </div>

      </div>

    </div>

 

样式

#focus_img {

FILTER:progid:DXImagetransform.Microsoft.Fade (duration=0.5,overlap=1.0)}

 

代码

<script type="text/javascript">

  var num = 1;

  function getimg(i) {

    for (n = 1; n <= 5; n++) {

      var b = document.getElementById("b" + n);

      b.className = n == i ? "selected": "";

    }

    playimg(i);

    playtxt(i);

    num = i;

  }

  function playtxt(num) {

    try {

      with(focus_txt) {

        filters[0].Apply();

        for (i = 1; i <= 5; i++)

i == num ? children[i - 1].style.display = "block": children[i - 1].style.display = "none";

        filters[0].play();

      }

    } catch(e) {

      for (n = 1; n <= 5; n++) {

        var t = document.getElementById("t" + n);

        t.style.display = n == num ? "block": "none";

      }

    }

  }

  function playimg(num) {

    try {

      with(focus_img) {

        filters[0].Apply();

        for (i = 1; i <= 5; i++)

i == num ? children[i - 1].style.display = "block": children[i - 1].style.display = "none";

        filters[0].play();

      }

    } catch(e) {

      for (n = 1; n <= 5; n++) {

        var m = document.getElementById("m" + n);

        m.style.display = n == num ? "block": "none";

      }

    }

  }

  function autorun() {

    num++;

    if (num > 5) num = 1;

    getimg(num);

  }

  function setauto() {

    autotimer = setInterval(autorun, 5000);

  }

  function stopauto() {

    clearInterval(autotimer);

  }

  setauto();

  </script>

 

要点

定位实现整体布局

大图容器应用动态滤镜，图片变换时播放滤镜，针对其它浏览器使用try语句

定义通用变量实现自动播放

 

代码改进

只对按钮容器设ID属性，其它用children属性获取

 

<script>

var n=0;

var showsTab = document.getElementById("focus_tabsbg");

var m=showsTab.getElementsByTagName("div").length;

function Mea(value){

n=value;

setBg(value);

plays(value);

cons(value);

}

function setBg(value){

for(var i=0;i<m;i++)

   if(value==i){

showsTab.getElementsByTagName("div")[i].className='tabs_on';

var pp = 236-59*i;

showsTab.style.backgroundPosition = '0 -'+pp+'px';

}

else{        

showsTab.getElementsByTagName("div")[i].className='';

} 

}

function plays(value){

try

{

with (focus_bigpic){

filters[0].Apply();

for(i=0;i<m;i++)i==value?children[i].className="dis":children[i].className="undis";

filters[0].play();                 

}

}

catch(e)

{

var d = document.getElementById("focus_bigpic").getElementsByTagName("div");

for(i=0;i<m;i++)i==value?d[i].className="dis":d[i].className="undis";

}

}

function cons(value){

try

{

with (focus_txt){

for(i=0;i<m;i++)i==value?children[i].className="dis":children[i].className="undi        

}

}

catch(e)

{

var d = document.getElementById("focus_txt").getElementsByTagName("div");

for(i=0;i<m;i++)i==value?d[i].className="dis":d[i].className="undis";

}

}

 

function clearAuto(){clearInterval(autoStart)}

function setAuto(){autoStart=setInterval("auto(n)", 3000)}

function auto(){

n++;

if(n>=m)n=0;

Mea(n);

}

function sub(){

n--;

if(n<0)n=m-1;

Mea(n);

}

setAuto();

</script>