图片切换效果(定时+编号)

js库引用地址:jquery-1.8.3.min.js

效果:

    

代码:

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  2 <html>

  3  <head>

  4   <title> New Document </title>

  5   <meta name="Generator" content="EditPlus">

  6   <meta name="Author" content="">

  7   <meta name="Keywords" content="">

  8   <meta name="Description" content="">

  9   <script type="text/javascript" src="js/jquery-1.8.0.js"></script>

 10   <style type="text/css">

 11     *{margin:0;padding:0;}

 12     body{font-size:12px;}

 13     .imgFloat{

 14         width:500px;

 15         height:400px;

 16         padding:2px;

 17         border:1px solid #999;

 18         position:relative;

 19         margin:0 auto;

 20     }

 21     .imgFloat ul{list-style:none;overflow:hidden;height:398px;}

 22     .imgFloat img{

 23         width:498px;

 24         height:398px;

 25     }

 26     .imgFloat ul li{

 27         opacity:'0';

 28         position:absolute;

 29         top:2px;

 30         left:2px;

 31     }

 32     .imgBtn{

 33         margin:0 auto;

 34         width:120px;

 35         height:30px;

 36         z-index:9999;

 37         position:absolute;

 38         text-align:right;

 39         top:5px;

 40         right:10px;

 41     }

 42     .imgBtn span{

 43         display:block;

 44         width:15px;

 45         height:15px;

 46         float:left;

 47         text-align:center;

 48         line-height:15px;

 49         margin-right:5px;

 50         border:1px solid #999;

 51         cursor:pointer;

 52         background-color:#FFFCE7;

 53     }

 54     .imgBtn .setColor{

 55         color:Red;

 56         width:20px;

 57         height:20px;

 58         line-height:20px;

 59         font-size:14px;

 60     }

 61   </style>

 62   

 63  </head>

 64 

 65  <body>

 66     <div class="imgFloat">

 67         <ul>

 68             <li style="display:block;"><img src="images/1.jpg" alt="图片一" /></li>

 69             <li><img src="images/2.jpg" alt="图片二" /></li>

 70             <li><img src="images/3.jpg" alt="图片三" /></li>

 71             <li><img src="images/4.jpg" alt="图片四" /></li>

 72             <li><img src="images/5.jpg" alt="图片五" /></li>

 73         </ul>

 74         <div class="imgBtn"></div>

 75     </div>

 76     <script type="text/javascript">

 77     var num=0;

 78     function showDiv(i){

 79             if(i!=undefined){

 80                 num=i-1;

 81             }

 82             var numBtn=$(".imgFloat ul li").length;

 83             if(num==numBtn){

 84                 num=0;

 85             }

 86             else{

 87                 num+=1;

 88             }

 89             

 90             $(".imgBtn span").eq(num).addClass("setColor").siblings().removeClass("setColor");

 91             //$(".imgFloat ul li").eq(num).siblings().fadeOut(600,function(){$(".imgFloat ul li").eq(num).fadeIn(600);});

 92             $(".imgFloat ul li").eq(num).siblings().animate({opacity:'0'},2000);

 93             $(".imgFloat ul li").eq(num).animate({opacity:'1'},2000);

 94         }

 95 

 96     $(function(){

 97         var numBtn=$(".imgFloat ul li").length-1;

 98         var html;

 99         for(var i=0;i<5;i++)

100         {

101             i1=i+1;

102             html+="<span onclick='showDiv("+i+")'>"+i1+"</span>";

103         }

104         $(".imgBtn").html(html.substring(9));

105         $(".imgBtn span:first").addClass("setColor");

106 

107         var timer=setInterval("showDiv()",4000);

108         $(".imgFloat").mouseover(function(){

109             clearInterval(timer);

110         }).mouseout(function(){

111             timer=setInterval("showDiv()",4000);

112         });

113     });

114   </script>

115  </body>

116 </html>
View Code

 

你可能感兴趣的:(图片)