用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找一下.