Web应用——焦点图自动浏览

先看看效果图：

几张图片可以自动循环显示，此效果在各大网站应用十分流行，这里用Javascript+CSS完成此效果，具体效果请下载样例查看。

样例下载： 点击下载

Body部分：

<!-- Example Source Code -->
< div  id ="container"  style ="width:960px; margin: 0 auto; overflow: hidden; background-color: #FFF;" >
   < div  class ="wrap" >
     < div  class ="topbar clearfix" >       
       < p >
         < script  language ="LiveScript" >     
         <!--  Hiding        
        today  =   new  Date()        
        month = today.getMonth() + 1         
        year = today.getFullYear()        
        day = today.getDate()        
        document.write(year, " - " ,month, " - " ,day);        
         //  end hiding contents -->    
         </ script >
       </ p >     
     </ div >
    
     <!--  partA begin  -->     
     < div  class ="lA" >
       < div  class ="focus" >
         < div  class ="focusb" >
           < a  href ="http://www.cnblogs.com/uhome/"  target ="_blank" >< img  src ="images/1.jpg"  title ="科比追平尤因 湖人狂胜"   /></ a >
           < a  href ="http://www.cnblogs.com/uhome/"  target ="_blank" >< img  src ="images/2.jpg"  title ="勒布朗29分 骑士负山猫"   /></ a >
           < a  href ="http://www.cnblogs.com/uhome/"  target ="_blank" >< img  src ="images/3.jpg"  title ="邓肯替补 马刺不敌猛龙"   /></ a >
           < a  href ="http://www.cnblogs.com/uhome/"  target ="_blank" >< img  src ="images/4.jpg"  title ="年终特刊-2009非常完美"   /></ a >
           < div  class ="titlebg" ></ div >
           < p >
             < a  href ="http://www.cnblogs.com/uhome/"  target ="_blank" > 科比追平尤因 湖人狂胜 </ a >
             < a  href ="http://www.cnblogs.com/uhome/"  target ="_blank"  style ="display:none;" > 勒布朗29分 骑士负山猫 </ a >
             < a  href ="http://www.cnblogs.com/uhome/"  target ="_blank"  style ="display:none;" > 邓肯替补 马刺不敌猛龙 </ a >
             < a  href ="http://www.cnblogs.com/uhome/"  target ="_blank"  style ="display:none;" > 年终特刊-2009非常完美 </ a >
           </ p >
         </ div >
         < div  class ="focuss" >
           < p  class ='current' >< img  src ="images/1.jpg"  title ="科比追平尤因 湖人狂胜"   /></ p >
           < p >< img  src ="images/2.jpg"  title ="勒布朗29分 骑士负山猫"   /></ p >
           < p >< img  src ="images/3.jpg"  title ="邓肯替补 马刺不敌猛龙"   /></ p >
           < p  style ='padding-right:0' >< img  src ="images/4.jpg"  title ="年终特刊-2009非常完美"   /></ p >
         </ div >
       </ div >
     </ div >
     <!--  partA end  -->     
   </ div >             
</ div >
< div  class ="footer" >
   < div  class ="foot" > Copyright  &copy; 2009  < a  href ="http://www.cnblogs.com/uhome/" > 拂云漂海龙 </ a >  Powered by: Chotim 提供：CSS Sticky Footer
   </ div >
</ div >

 

CSS部分：

/* Example Source Code */
html,body,div,p,ul,ol,li,dl,dt,dd { margin : 0 ; padding : 0 ; font-style : normal ; font-size : 12px ; font-weight : normal ; color : #002050 ; }
ul,ol { list-style : none ; }

img { border : none ; }
body { font-family : "宋体", Arial, Helvetica, sans-serif ; background : url(skin/pagebg.jpg) repeat-x ;  background-color : #c1e7fe ; }
.footer { background :  url(skin/pagebg.jpg) repeat-x ; }

a:link { color : #002050 ; text-decoration : none ; }
a:visited { color : #002050 ; text-decoration : none }
a:hover { color : #f00!important ; text-decoration : underline!important ; }
a:active { color : #f00 ; }

.wrap { width : 950px ; margin : 0 auto ; overflow : hidden ; }   
.clear { zoom : 1 ; }

a img { border : #72b6f2 1px solid ; padding : 3px ; background-color : #fff ; }
a:hover img { border-color : #002050 ; background-color : #003791 ; }

.lA { width : 362px ;  margin : 0 auto ;  overflow : hidden ; }

/* 背景图片no-repeat */
.focus,
.focus .focuss p.current,
.focus .focuss p.mouseon { background : url(skin/bg.png) no-repeat ; }

/* CSS for focus */
.focus { background-position : 0 -91px ;  height : 265px ; padding : 5px 5px 0 5px ; }
.focus .focusb { width : 352px ; height : 202px ; position : relative ; overflow : hidden ; }
.focus .focusb img { width : 350px ; height : 200px ; padding : 0 ; border : 1px solid #fff!important ; }
.focus .focusb .titlebg { position : absolute ; width : 350px ; height : 40px ; top : 161px ; left : 1px ; background-color : #000 ; z-index : 5 ; filter : Alpha(Opacity=65) ; opacity : 0.65 ; }
.focus .focusb p { position : absolute ; top : 165px ; left : 10px ; z-index : 10 ; font-size : 22px ; font-family : "microsoft yahei","微软雅黑","黑体","simsun","宋体" ; font-weight : normal ; }
.focus a:link,.focus a:visited { color : #fff ; }
.focus a:hover { color : #ff0!important ; text-decoration : none!important ; }
.focus .focuss { width : 352px ; height : 63px ; overflow : hidden ; zoom : 1 ; }
.focus .focuss p { width : 85px ; height : 56px ; padding : 7px 4px 0 0 ; float : left ; }
.focus .focuss p.mouseon { background-position : 0 -870px ; }
.focus .focuss p.current { background-position : -245px 0 ; }
.focus .focuss p.current img { border : 1px solid #fff ; }
.focus .focuss p img { width : 83px ; height : 47px ; padding : 0 ; border : #72b6f2 1px solid ; cursor : pointer ; }

 

Javascript部分：

// Example Source Code
< script type = " text/javascript " >    
jQuery( function (){
showImg( 0 )
var  index  =   1 ;

     jQuery( ' .focuss>p ' ).click( function (){index = jQuery( ' .focuss>p ' ).index( this );showImg(index);});        
     jQuery( ' .focuss>p>img ' ).hover(
              function (){
                  if (MyTime){clearInterval(MyTime);}
                },            
             function (){            
                 if (index == 3 ){index = 0 ;} else {index ++ ;}
                MyTime  =  setInterval( function (){
                showImg(index)
                index ++ ;
                 if (index == 4 ){index = 0 ;}
              } ,  6000 );
                });

     jQuery( ' .focusb ' ).hover(
              function (){
                  if (MyTime){clearInterval(MyTime);}
                },            
             function (){
                MyTime  =  setInterval( function (){
                showImg(index)
                index ++ ;
                 if (index == 4 ){index = 0 ;}
              } ,  6000 );
                });

      var  MyTime  =  setInterval( function (){
        showImg(index)
        index ++ ;
         if (index == 4 ){index = 0 ;}
     } ,  6000 );     

})

function  showImg(i){
        jQuery( " .focusb>a>img " ).hide();
        jQuery( " .focusb>a>img " ).eq(i).fadeIn( 500 );
        jQuery( " .focuss>p " ).eq(i).addClass( " current " ).siblings().removeClass( " current " );
        jQuery( " .focusb>p>a " ).eq(i).show().siblings().hide();
};
< / script>

样例下载： 点击下载