图片切换效果2（定时+左右按钮）

最新推荐文章于 2024-05-03 11:08:18 发布

weixin_30216561

最新推荐文章于 2024-05-03 11:08:18 发布

阅读量69

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/aspnetweb/p/3878589.html

版权

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 οnclick='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>

转载于:https://www.cnblogs.com/aspnetweb/p/3878589.html

weixin_30216561

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片切换效果2（定时+左右按钮）

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 ...
复制链接

扫一扫