[Web]Jquery圆点的图片轮播

最新推荐文章于 2021-06-24 16:08:31 发布
_Henrik
最新推荐文章于 2021-06-24 16:08:31 发布
阅读量484
点赞数
 
 
  
  
   
    
        
         
         <!DOCTYPE html> 
         
         
         < 
         html 
         > 
         
         
         < 
         head 
         > 
         
         
         < 
         meta 
         charset 
         = 
         "utf-8" 
         > 
         
         
         < 
         meta 
         http-equiv 
         = 
         "X-UA-Compatible" 
         content 
         = 
         "IE=edge,chrome=1" 
         > 
         
         
         < 
         title 
         >index</ 
         title 
         > 
         
         
         < 
         meta 
         name 
         = 
         "description" 
         content 
         = 
         "" 
         > 
         
         
         < 
         meta 
         name 
         = 
         "keywords" 
         content 
         = 
         "" 
         > 
         
         
         < 
         link 
         href 
         = 
         "css/common.css" 
         rel 
         = 
         "stylesheet" 
         > 
         
         
         < 
         script 
         src 
         = 
         "jquery-1.8.1.min.js" 
         type 
         = 
         "text/javascript" 
         ></ 
         script 
         > 
         
         
         < 
         script 
         src 
         = 
         "javascript/slide.js" 
         ></ 
         script 
         > 
         
         
         </ 
         head 
         > 
         
         
         < 
         body 
         > 
         
         
         < 
         div 
         class 
         = 
         "wrapper clearfix" 
         > 
         
         
              
         < 
         div 
         class 
         = 
         "pageContent" 
         > 
         
         
                  
         < 
         div 
         id 
         = 
         "pic1" 
         class 
         = 
         "pic" 
         style 
         = 
         "margin:100px auto;" 
         > 
         
         
                      
         < 
         ul 
         id 
         = 
         "slideName1" 
         class 
         = 
         "sildebar clearfix" 
         > 
         
         
                          
         < 
         li 
         style 
         = 
         "background:#4390EE" 
         >< 
         a 
         href 
         = 
         "" 
         >< 
         img 
         src 
         = 
         "images/img1.jpg" 
         alt 
         = 
         "图片一" 
         width 
         = 
         "100%" 
         height 
         = 
         "300px" 
         ></ 
         a 
         ></ 
         li 
         > 
         
         
                          
         < 
         li 
         style 
         = 
         "background:#CA4040" 
         >< 
         a 
         href 
         = 
         "" 
         >< 
         img 
         src 
         = 
         "images/img2.jpg" 
         alt 
         = 
         "图片二" 
         width 
         = 
         "100%" 
         height 
         = 
         "300px" 
         ></ 
         a 
         ></ 
         li 
         > 
         
         
                          
         < 
         li 
         style 
         = 
         "background:#FF8604" 
         >< 
         a 
         href 
         = 
         "" 
         >< 
         img 
         src 
         = 
         "images/img3.jpg" 
         alt 
         = 
         "图片三" 
         width 
         = 
         "100%" 
         height 
         = 
         "300px" 
         ></ 
         a 
         ></ 
         li 
         > 
         
         
                          
         < 
         li 
         style 
         = 
         "background:#4e8a00" 
         >< 
         a 
         href 
         = 
         "" 
         >< 
         img 
         src 
         = 
         "images/img4.jpg" 
         alt 
         = 
         "图片四" 
         width 
         = 
         "100%" 
         height 
         = 
         "300px" 
         ></ 
         a 
         ></ 
         li 
         > 
         
         
                          
         < 
         li 
         style 
         = 
         "background:#ff0" 
         >< 
         a 
         href 
         = 
         "" 
         >< 
         img 
         src 
         = 
         "images/img5.jpg" 
         alt 
         = 
         "图片五" 
         width 
         = 
         "100%" 
         height 
         = 
         "300px" 
         ></ 
         a 
         ></ 
         li 
         > 
         
         
                      
         </ 
         ul 
         > 
         
         
                      
         < 
         a 
         href 
         = 
         "javascript:void(0)" 
         class 
         = 
         "btn-focus prev" 
         > 上一张 </ 
         a 
         > 
         
         
                      
         < 
         a 
         href 
         = 
         "javascript:void(0)" 
         class 
         = 
         "btn-focus next" 
         >下一张</ 
         a 
         > 
         
         
                  
         </ 
         div 
         > 
         
         
              
         </ 
         div 
         > 
         
         
         </ 
         div 
         > 
         
         
         </ 
         body 
         > 
         
         
         </ 
         html 
         > 
         
       
  
  
 
 
 
 
  
  
   
    
       
         1 
        
       
         2 
        
       
         3 
        
       
         4 
        
       
         5 
        
       
         6 
        
       
         7 
        
       
         8 
        
       
         9 
        
       
         10 
        
       
         11 
        
       
         12 
        
       
         13 
        
       
         14 
        
       
         15 
        
       
         16 
        
       
         17 
        
       
         18 
        
       
         19 
        
       
         20 
        
       
         21 
        
       
         22 
        
       
         23 
        
       
         24 
        
       
         25 
        
        
         
         //点击圆点时，进行切换 
         
         
           
         $( 
         '#pic1 .focusBox li' 
         ).click( 
         function 
         (){ 
         
         
              
         index = $( 
         '#pic1 .focusBox li' 
         ).index( 
         this 
         ); 
         
         
              
         showPic(index); 
         
         
           
         }).eq(0).trigger( 
         'click' 
         ); 
         
         
            
         
         
           
         $( 
         '#pic1 .sildebar' 
         ).css( 
         "width" 
         ,sWidth * (len)); 
         
        
            
         
         
         //定时器，定时进行切换 
         
         
           
         $( 
         '#pic1' 
         ).hover( 
         function 
         (){ 
         
         
              
         clearInterval(timer); 
         
         
              
         }, 
         function 
         (){ 
         
         
                  
         timer = setInterval( 
         function 
         (){ 
         
         
                  
         showPic(index); 
         
         
                  
         index++; 
         
         
                  
         if 
         (index == len){index = 0;} 
         
         
                  
         },3000); 
         
         
           
         }).trigger( 
         'mouseleave' 
         ); 
         
        
            
         
         
           
         function 
         showPic(index){ 
         
         
              
         var 
         nowLeft = -index * sWidth; 
         
         
              
         $( 
         '#pic1 .sildebar' 
         ).stop( 
         true 
         , 
         false 
         ).animate({left:nowLeft},500); 
         
         
              
         $( 
         '#pic1 .focusBox li' 
         ).removeClass( 
         'cur' 
         ).eq(index).addClass( 
         'cur' 
         ); 
         
         
            
         //$('.sildebar li').eq(index).fadeIn(800).siblings().hide();//淡出淡入效果 
         
         
           
         } 
         
       
  
  
 
 
 
 
  
  
   
    
       
         1 
        
       
         2 
        
       
         3 
        
       
         4 
        
       
         5 
        
       
         6 
        
       
         7 
        
       
         8 
        
       
         9 
        
       
         10 
        
       
         11 
        
       
         12 
        
       
         13 
        
       
         14 
        
       
         15 
        
       
         16 
        
       
         17 
        
       
         18 
        
       
         19 
        
       
         20 
        
       
         21 
        
       
         22 
        
       
         23 
        
       
         24 
        
       
         25 
        
       
         26 
        
       
         27 
        
       
         28 
        
       
         29 
        
       
         30 
        
       
         31 
        
       
         32 
        
       
         33 
        
       
         34 
        
       
         35 
        
       
         36 
        
       
         37 
        
       
         38 
        
       
         39 
        
       
         40 
        
       
         41 
        
       
         42 
        
       
         43 
        
       
         44 
        
       
         45 
        
       
         46 
        
       
         47 
        
       
         48 
        
       
         49 
        
       
         50 
        
       
         51 
        
       
         52 
        
       
         53 
        
       
         54 
        
       
         55 
        
       
         56 
        
       
         57 
        
       
         58 
        
       
         59 
        
       
         60 
        
       
         61 
        
       
         62 
        
       
         63 
        
        
         
         .pic{ 
         
         
              
         position 
         : 
         relative 
         ; 
         
         
              
         width 
         : 
         700px 
         ; 
         
         
              
         height 
         : 
         300px 
         ; 
         
         
              
         overflow 
         : 
         hidden 
         ; 
         
         
              
         border 
         : 
         1px 
         #ddd 
         solid 
         ; 
         
         
              
         margin 
         : 
         10px 
         ; 
         
         
         } 
         
         
         .pic .sildebar{ 
         
         
               
         width 
         : 
         100% 
         ; 
         
         
               
         position 
         : 
         absolute 
         ; 
         
         
               
         top 
         : 
         0 
         ; 
         
         
               
         height 
         : 
         298px 
         ; 
         
         
         } 
         
         
         .pic .sildebar li{ 
         
         
               
         float 
         : 
         left 
         ; 
         
         
               
         width 
         : 
         700px 
         ; 
         
         
               
         overflow 
         : 
         hidden 
         ; 
         
         
               
         height 
         : 
         100% 
         ; 
         
         
         } 
         
         
         img{ 
         border 
         : 
         none 
         ;} 
         
         
         .focusBox { 
         
         
            
         position 
         :  
         absolute 
         ; 
         
         
            
         bottom 
         :  
         20px 
         ; 
         
         
            
         width 
         :  
         120px 
         ; 
         
         
            
         left 
         :  
         50% 
         ; 
         
         
            
         margin-left 
         :  
         -60px 
         ; 
         
         
         } 
         
         
         .focusBox li{ 
         
         
              
         float 
         : 
         left 
         ; 
         
         
              
         margin-right 
         : 
         10px 
         ; 
         
         
              
         width 
         : 
         10px 
         ; 
         
         
              
         height 
         : 
         10px 
         ; 
         
         
              
         border-radius: 
         10px 
         ; 
         
         
              
         background 
         : 
         #fff 
         ; 
         
         
              
         cursor 
         : 
         pointer 
         ; 
         
         
         } 
         
         
         .focusBox li.cur{ 
         
         
              
         background 
         : 
         #f60 
         ; 
         
         
              
         opacity: 
         0.6 
         ; 
         
         
              
         filter:alpha(opacity= 
         60 
         ); 
         
         
         } 
         
         
         .btn-focus{ 
         
         
              
         position 
         : 
         absolute 
         ; 
         
         
              
         display 
         : 
         block 
         ; 
         
         
              
         width 
         : 
         60px 
         ; 
         
         
              
         height 
         : 
         30px 
         ; 
         
         
              
         background-color 
         : 
         #000 
         ; 
         
         
              
         opacity: 
         0 
         ; 
         
         
              
         filter:alpha(opacity= 
         0 
         ); 
         
         
              
         text-align 
         :  
         center 
         ; 
         
         
              
         color 
         : 
         #fff 
         ; 
         
         
              
         line-height 
         : 
         30px 
         ; 
         
         
              
         text-decoration 
         : 
         none 
         ; 
         
         
         } 
         
         
         .prev{ 
         
         
              
         left 
         : 
         2px 
         ; 
         
         
              
         top 
         : 
         50% 
         ; 
         
         
         } 
         
         
         .next{ 
         
         
              
         right 
         : 
         2px 
         ; 
         
         
              
         top 
         : 
         50% 
         ; 
         
         
         }