首页 > 代码库 > 图片切换效果2（定时+左右按钮）
图片切换效果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 <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="http://www.mamicode.com/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="http://www.mamicode.com/images/1.jpg" alt="图片一" /></li> 69 <li><img src="http://www.mamicode.com/images/2.jpg" alt="图片二" /></li> 70 <li><img src="http://www.mamicode.com/images/3.jpg" alt="图片三" /></li> 71 <li><img src="http://www.mamicode.com/images/4.jpg" alt="图片四" /></li> 72 <li><img src="http://www.mamicode.com/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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。