用javascript实现图片切换

.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;}

这是实现的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>

这是源代码:


<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>

这是CSS样式表:只有几行是上面所用到的,我是从网上下载的,不知道哪个能删,哪个不能删.

你只需ctrl+F找一下.