1 <html> 2 <head> 3 <title>position</title> 4 <style type="text/css"> 5 *{ 6 margin:0; 7 padding:0; 8 } 9 ul{ 10 list-style: none; 11 } 12 .out{ 13 width:730px; 14 height:454px; 15 margin:50px auto; 16 position:relative; 17 } 18 .out .img li{ 19 position:absolute; 20 left:0; 21 top:0; 22 } 23 .out .num{ 24 position:absolute; 25 left:0; 26 bottom:20px; 27 text-align:center; 28 font-size: 0; 29 width:100%; 30 } 31 .out .btn{ 32 position:absolute; 33 top:50%; 34 margin-top:-30px; 35 width:30px; 36 height:60px; 37 background-color:aliceblue; 38 color:black; 39 text-align:center; 40 line-height: 60px; 41 font-size:40px; 42 display:none; 43 } 44 .out .num li{ 45 width:20px; 46 height:20px; 47 background-color:black; 48 color:#fff; 49 text-align:center; 50 line-height:20px; 51 border-radius:60%; 52 display:inline; 53 font-size:18px; 54 margin:0 10px; 55 cursor:pointer; 56 } 57 .out .num li.active{ 58 background-color:red; 59 } 60 .out .left{ 61 left:0; 62 } 63 .out .right{ 64 right:0; 65 } 66 .out:hover .btn{ 67 display:block; 68 color:white; 69 font-weight:900; 70 background-color:black; 71 opacity:0.8; 72 cursor:pointer; 73 } 74 .out img{ 75 height:100%; 76 width:100%; 77 } 78 </style> 79 80 </head> 81 <body> 82 <div class="out"> 83 <ul class="img"> 84 <li><a href="#"><img src="bopin/images/bigImg.jpg" alt=""></a></li> 85 <li><a href="#"><img src="bopin/images/bigImg1.jpg" alt=""></a></li> 86 <li><a href="#"><img src="bopin/images/bigImg2.jpg" alt=""></a></li> 87 <li><a href="#"><img src="bopin/images/bigImg3.jpg" alt=""></a></li> 88 <li><a href="#"><img src="bopin/images/bigImg4.jpg" alt=""></a></li> 89 <li><a href="#"><img src="bopin/images/bigImg5.jpg" alt=""></a></li> 90 </ul> 91 92 <ul class="num"> 93 <!-- <li class="active">1</li> 94 <li>2</li> 95 <li>3</li> 96 <li>4</li> 97 <li>5</li> --> 98 </ul> 99 100 <div class="left btn"><</div> 101 <div class="right btn">></div> 102 103 </div> 104 105 <script src="jquery-1.12.3.min.js"></script> 106 107 <script type="text/javascript"> 108 $(function(){ 109 var size=$(".img li").size(); //图片的数量 110 for(var i=1;i<=size;i++){ 111 var li="<li>"+i+"</li>"; 112 $(".num").append(li); //给类插入<li> 113 } 114 $(".num li").eq(0).addClass("active"); 115 116 $(".num li").mouseover(function(){ 117 $(this).addClass("active").siblings().removeClass("active"); 118 var index=$(this).index(); 119 i=index; 120 $(".img li").eq(index).fadeIn(1000).siblings().fadeOut(1000); 121 }); 122 123 i=0; 124 var t=setInterval(move,1500); //无操作时，计时轮播 125 126 function move(){ 127 i++; 128 if(i==size){ //当图片标记最大时，轮播到开头 129 i=0; 130 } 131 //图片标记切换 132 $(".num li").eq(i).addClass("active").siblings().removeClass("active"); 133 //图片切换 134 $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); 135 } 136 137 function moveL(){ 138 i--; 139 if(i==-1){ 140 i=size-1; 141 } 142 $(".num li").eq(i).addClass("active").siblings().removeClass("active"); 143 $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); 144 } 145 146 $(".out").hover(function(){ 147 clearInterval(t); //清空计时器 148 },function(){ 149 t=setInterval(move,1500); 150 }); 151 152 $(".out .right").click(function(){ //右切换 153 move() 154 }); 155 $(".out .left").click(function(){ //左切换 156 moveL() 157 }) 158 159 }); 160 </script> 161 162 </body> 163 164 </html>