.focusPicBox
{ width:765px; height:0 auto; margin:0 auto; background:#D2DBE6; padding:5px 0; border-bottom:1px solid #B1C0D2; border:1px solid #330000;}
.focusPicBox .focusPic { margin:0 auto; width:354px; padding:2px 0 0; background:#fff;}
.focusPicBox .pic { margin:0 auto; width:765px;}
/*.focusPic h2{ margin:0 auto; width:330px; text-align:left;padding:12px 0 5px;font-weight: bold;font-size: 14px; }*/
.focusPic p {margin:0 auto;width:330px; line-height:160%; text-align:left; padding:0 0 10px 0; text-indent:24px;}
.focusPic span {padding:0 0 0 23px;}
.focusPicBox .more {width:100%; margin:0 5px 0 0; }
/*.focusPic .more h3{ float:left; font-size:12px; font-weight:normal; padding:3px 0 0 7px;}
.focusPic .more h4{float:left; font-size:12px;padding:0 2px;border-right:1px solid #666; border-bottom:1px solid #666; margin:1px 0 0 5px;}*/
.focusPic .more h4 a { text-decoration:none; color:#bc2931; }
.focusPic .more h4 a:hover { color:#000;}
.focusPicBox .focusPic { margin:0 auto; width:354px; padding:2px 0 0; background:#fff;}
.focusPicBox .pic { margin:0 auto; width:765px;}
/*.focusPic h2{ margin:0 auto; width:330px; text-align:left;padding:12px 0 5px;font-weight: bold;font-size: 14px; }*/
.focusPic p {margin:0 auto;width:330px; line-height:160%; text-align:left; padding:0 0 10px 0; text-indent:24px;}
.focusPic span {padding:0 0 0 23px;}
.focusPicBox .more {width:100%; margin:0 5px 0 0; }
/*.focusPic .more h3{ float:left; font-size:12px; font-weight:normal; padding:3px 0 0 7px;}
.focusPic .more h4{float:left; font-size:12px;padding:0 2px;border-right:1px solid #666; border-bottom:1px solid #666; margin:1px 0 0 5px;}*/
.focusPic .more h4 a { text-decoration:none; color:#bc2931; }
.focusPic .more h4 a:hover { color:#000;}
这是实现的javascript代码:
<
script language
=
"
javascript
"
>
var nn;
nn = 1 ;
setTimeout( ' change_img() ' , 6000 );
function change_img()
{
if(nn>4) nn=1
setTimeout('setFocus1('+nn+')',6000);
nn++;
tt=setTimeout('change_img()',6000);
}
function setFocus1(i)
{
selectLayer1(i);
}
function selectLayer1(i)
{
switch(i)
{
case 1:
document.getElementById("focusPic1").style.display="block";
document.getElementById("focusPic2").style.display="none";
document.getElementById("focusPic3").style.display="none";
document.getElementById("focusPic4").style.display="none";
break;
case 2:
document.getElementById("focusPic1").style.display="none";
document.getElementById("focusPic2").style.display="block";
document.getElementById("focusPic3").style.display="none";
document.getElementById("focusPic4").style.display="none";
break;
case 3:
document.getElementById("focusPic1").style.display="none";
document.getElementById("focusPic2").style.display="none";
document.getElementById("focusPic3").style.display="block";
document.getElementById("focusPic4").style.display="none";
break;
case 4:
document.getElementById("focusPic1").style.display="none";
document.getElementById("focusPic2").style.display="none";
document.getElementById("focusPic3").style.display="none";
document.getElementById("focusPic4").style.display="block";
break;
}
}
</ script >
var nn;
nn = 1 ;
setTimeout( ' change_img() ' , 6000 );
function change_img()
{
if(nn>4) nn=1
setTimeout('setFocus1('+nn+')',6000);
nn++;
tt=setTimeout('change_img()',6000);
}
function setFocus1(i)
{
selectLayer1(i);
}
function selectLayer1(i)
{
switch(i)
{
case 1:
document.getElementById("focusPic1").style.display="block";
document.getElementById("focusPic2").style.display="none";
document.getElementById("focusPic3").style.display="none";
document.getElementById("focusPic4").style.display="none";
break;
case 2:
document.getElementById("focusPic1").style.display="none";
document.getElementById("focusPic2").style.display="block";
document.getElementById("focusPic3").style.display="none";
document.getElementById("focusPic4").style.display="none";
break;
case 3:
document.getElementById("focusPic1").style.display="none";
document.getElementById("focusPic2").style.display="none";
document.getElementById("focusPic3").style.display="block";
document.getElementById("focusPic4").style.display="none";
break;
case 4:
document.getElementById("focusPic1").style.display="none";
document.getElementById("focusPic2").style.display="none";
document.getElementById("focusPic3").style.display="none";
document.getElementById("focusPic4").style.display="block";
break;
}
}
</ script >
这是源代码:
<
div
class
="focusPicBox"
>
< div id ="focusPic1" style ="display: block ;width:100%" >
< div class ="pic" >
< a href ="image/小小牧羊人.jpg" target ="_blank" >< img class ="imgstyle" src ="image/小小牧羊人.jpg" alt ="小小牧羊人" /></ a >
< a href ="image/斤斤计较.jpg" target ="_blank" >< img alt ="斤斤计较" class ="imgstyle" src ="image/斤斤计较.jpg" /></ a >
< a href ="image/关爱女孩活动.jpg" target ="_blank" >< img alt ="关爱女孩活动" class ="imgstyle" src ="image/关爱女孩活动.jpg" /></ a >
</ div >
< div class ="smallfont" align ="right" >
< img src ="image/redright.jpg" style ="width: 18px" /> 我来换头图: 1 < a href ="javascript:setFocus1(2);" target ="_self" > 2 </ a > < a href ="javascript:setFocus1(3);" target ="_self" > 3 </ a > < a href ="javascript:setFocus1(4);" target ="_self" > 4 </ a ></ div >
</ div >
< div id ="focusPic2" style ="display: none; width:100%" >
< div class ="pic" >
< a href ="日常用品/9E2E76FFCF08CE85BBBAA1A4C79C7F5A.jpg" target ="_blank" >< img class ="imgstyle" src ="日常用品/9E2E76FFCF08CE85BBBAA1A4C79C7F5A.jpg" /></ a >
< a href ="日常用品/3DBE18477CE3990665D1DAFE0000F0DD.jpg" target ="_blank" >< img class ="imgstyle" src ="日常用品/3DBE18477CE3990665D1DAFE0000F0DD.jpg" /></ a >
< a href ="日常用品/11CEA9197D476890634185DAB212F400.jpg" target ="_blank" > < img class ="imgstyle" src ="日常用品/11CEA9197D476890634185DAB212F400.jpg" /></ a >
</ div >
< div class ="more" align ="right" >
< div class ="smallfont" >< img src ="image/redright.jpg" style ="width: 18px" /> 我来换头图: < a href ="javascript:setFocus1(1);" target ="_self" > 1 </ a > 2 < a href ="javascript:setFocus1(3);" target ="_self" > 3 </ a > < a href ="javascript:setFocus1(4);" target ="_self" > 4 </ a ></ div >
</ div >
</ div >
< div id ="focusPic3" style ="display: none;" >
< div class ="pic" >
< a href ="日常用品/40218.jpg" target ="_blank" >< img class ="imgstyle" src ="日常用品/40218.jpg" /></ a >
< a href ="日常用品/40191.jpg" target ="_blank" >< img class ="imgstyle" src ="日常用品/40191.jpg" /></ a >
< a href ="日常用品/benz1.jpg" target ="_blank" >< img class ="imgstyle" src ="日常用品/benz1.jpg" /></ a >
</ div >
< div class ="more" >
< div class ="smallfont" >< img src ="image/redright.jpg" style ="width: 18px" /> 我来换头图: < a href ="javascript:setFocus1(1);" target ="_self" > 1 </ a > < a href ="javascript:setFocus1(2);" target ="_self" > 2 </ a > 3 < a href ="javascript:setFocus1(4);" target ="_self" > 4 </ a ></ div >
</ div >
</ div >
< div id ="focusPic4" style ="display: none;" >
< div class ="pic" >
< a href ="日常用品/晚霞中的波音787梦想飞机.jpg" target ="_blank" >< img src ="日常用品/晚霞中的波音787梦想飞机.jpg" class ="imgstyle" /></ a >
< a href ="日常用品/涂装波音787飞机.jpg" target ="_blank" >< img class ="imgstyle" src ="日常用品/涂装波音787飞机.jpg" /></ a >
< a href ="日常用品/俯视飞行中的波音787梦想飞机.jpg" target ="_blank" >< img class ="imgstyle" src ="日常用品/俯视飞行中的波音787梦想飞机.jpg" /></ a >
</ div >
< div class ="smallfont" >< img src ="image/redright.jpg" style ="width: 18px" /> 我来换头图: < a href ="javascript:setFocus1(1);" target ="_self" > 1 </ a > < a href ="javascript:setFocus1(2);" target ="_self" > 2 </ a > < a href ="javascript:setFocus1(3);" target ="_self" > 3 </ a > 4 </ div >
</ div >
</ div >
< div id ="focusPic1" style ="display: block ;width:100%" >
< div class ="pic" >
< a href ="image/小小牧羊人.jpg" target ="_blank" >< img class ="imgstyle" src ="image/小小牧羊人.jpg" alt ="小小牧羊人" /></ a >
< a href ="image/斤斤计较.jpg" target ="_blank" >< img alt ="斤斤计较" class ="imgstyle" src ="image/斤斤计较.jpg" /></ a >
< a href ="image/关爱女孩活动.jpg" target ="_blank" >< img alt ="关爱女孩活动" class ="imgstyle" src ="image/关爱女孩活动.jpg" /></ a >
</ div >
< div class ="smallfont" align ="right" >
< img src ="image/redright.jpg" style ="width: 18px" /> 我来换头图: 1 < a href ="javascript:setFocus1(2);" target ="_self" > 2 </ a > < a href ="javascript:setFocus1(3);" target ="_self" > 3 </ a > < a href ="javascript:setFocus1(4);" target ="_self" > 4 </ a ></ div >
</ div >
< div id ="focusPic2" style ="display: none; width:100%" >
< div class ="pic" >
< a href ="日常用品/9E2E76FFCF08CE85BBBAA1A4C79C7F5A.jpg" target ="_blank" >< img class ="imgstyle" src ="日常用品/9E2E76FFCF08CE85BBBAA1A4C79C7F5A.jpg" /></ a >
< a href ="日常用品/3DBE18477CE3990665D1DAFE0000F0DD.jpg" target ="_blank" >< img class ="imgstyle" src ="日常用品/3DBE18477CE3990665D1DAFE0000F0DD.jpg" /></ a >
< a href ="日常用品/11CEA9197D476890634185DAB212F400.jpg" target ="_blank" > < img class ="imgstyle" src ="日常用品/11CEA9197D476890634185DAB212F400.jpg" /></ a >
</ div >
< div class ="more" align ="right" >
< div class ="smallfont" >< img src ="image/redright.jpg" style ="width: 18px" /> 我来换头图: < a href ="javascript:setFocus1(1);" target ="_self" > 1 </ a > 2 < a href ="javascript:setFocus1(3);" target ="_self" > 3 </ a > < a href ="javascript:setFocus1(4);" target ="_self" > 4 </ a ></ div >
</ div >
</ div >
< div id ="focusPic3" style ="display: none;" >
< div class ="pic" >
< a href ="日常用品/40218.jpg" target ="_blank" >< img class ="imgstyle" src ="日常用品/40218.jpg" /></ a >
< a href ="日常用品/40191.jpg" target ="_blank" >< img class ="imgstyle" src ="日常用品/40191.jpg" /></ a >
< a href ="日常用品/benz1.jpg" target ="_blank" >< img class ="imgstyle" src ="日常用品/benz1.jpg" /></ a >
</ div >
< div class ="more" >
< div class ="smallfont" >< img src ="image/redright.jpg" style ="width: 18px" /> 我来换头图: < a href ="javascript:setFocus1(1);" target ="_self" > 1 </ a > < a href ="javascript:setFocus1(2);" target ="_self" > 2 </ a > 3 < a href ="javascript:setFocus1(4);" target ="_self" > 4 </ a ></ div >
</ div >
</ div >
< div id ="focusPic4" style ="display: none;" >
< div class ="pic" >
< a href ="日常用品/晚霞中的波音787梦想飞机.jpg" target ="_blank" >< img src ="日常用品/晚霞中的波音787梦想飞机.jpg" class ="imgstyle" /></ a >
< a href ="日常用品/涂装波音787飞机.jpg" target ="_blank" >< img class ="imgstyle" src ="日常用品/涂装波音787飞机.jpg" /></ a >
< a href ="日常用品/俯视飞行中的波音787梦想飞机.jpg" target ="_blank" >< img class ="imgstyle" src ="日常用品/俯视飞行中的波音787梦想飞机.jpg" /></ a >
</ div >
< div class ="smallfont" >< img src ="image/redright.jpg" style ="width: 18px" /> 我来换头图: < a href ="javascript:setFocus1(1);" target ="_self" > 1 </ a > < a href ="javascript:setFocus1(2);" target ="_self" > 2 </ a > < a href ="javascript:setFocus1(3);" target ="_self" > 3 </ a > 4 </ div >
</ div >
</ div >
这是CSS样式表:只有几行是上面所用到的,我是从网上下载的,不知道哪个能删,哪个不能删.
你只需ctrl+F找一下.