结构
<div class="left_1">
————大图容器————
<div id="focus_img" οnmοuseοver="stopauto()" οnmοuseοut="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" οnmοuseοver="stopauto()" οnmοuseοut="setauto()">
<div id="t1">这里显示标题</div>
<div id="t2" style="display:none">这里显示标题</div>
<div id="t3" style="display:none">这里显示标题</div>
…………
</div>
————按钮容器————
<div id="focus_btn" οnmοuseοver="stopauto()" οnmοuseοut="setauto()">
<div id="focus_btn2">
<div id="b1" οnmοuseοver="getimg(1)" class="selected"><a href="#" target="_blank">按钮一</a></div>
<div id="b2" οnmοuseοver="getimg(2)"><a href="#" target="_blank">按钮二</a></div>
<div id="b3" οnmοuseοver="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>