1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 *{ 8 padding:0; 9 margin:0; 10 } 11 ul,ol{ 12 list-style: none; 13 } 14 a{ 15 text-decoration: none; 16 color:#333; 17 } 18 .carousel{ 19 width: 900px; 20 height: 540px; 21 border: 1px solid #000; 22 margin:50px auto; 23 position: relative; 24 } 25 .carousel .imgs ul li{ 26 position: absolute; 27 left:0; 28 top:0; 29 width: 900px; 30 height: 540px; 31 display: none; 32 } 33 .carousel .imgs ul li:first-child{ 34 display: block; 35 } 36 .carousel .btns a{ 37 position: absolute; 38 top:50%; 39 margin-top: -30px; 40 width: 30px; 41 height: 60px; 42 text-align: center; 43 line-height: 60px; 44 font-size: 20px; 45 background-color: rgba(0,0,0,.6); 46 color:#fff; 47 } 48 .carousel .btns a.leftBtn{ 49 left:10px; 50 } 51 .carousel .btns a.rightBtn{ 52 right: 10px; 53 } 54 .carousel .circles{ 55 width: 200px; 56 height: 20px; 57 position: absolute; 58 left:50%; 59 margin-left: -100px; 60 bottom: 30px; 61 } 62 .carousel .circles ol li{ 63 float: left; 64 width: 20px; 65 height: 20px; 66 border-radius: 50%; 67 margin-right: 10px; 68 background-color: orange; 69 color:#000; 70 text-align: center; 71 line-height: 20px; 72 } 73 .carousel .circles ol li.cur{ 74 background-color: red; 75 } 76 .carousel .circles ol li:last-child{ 77 margin-right: 0; 78 } 79 80 </style> 81 </head> 82 <body> 83 <div class="carousel" id="carousel"> 84 <div class="imgs" id="imgs"> 85 <ul> 86 <li><a href=""><img src="images/aoyun/0.jpg" ></a></li> 87 <li><a href=""><img src="images/aoyun/1.jpg" ></a></li> 88 <li><a href=""><img src="images/aoyun/2.jpg" ></a></li> 89 <li><a href=""><img src="images/aoyun/3.jpg" ></a></li> 90 <li><a href=""><img src="images/aoyun/4.jpg" ></a></li> 91 <li><a href=""><img src="images/aoyun/5.jpg" ></a></li> 92 <li><a href=""><img src="images/aoyun/6.jpg" ></a></li> 93 </ul> 94 </div> 95 <div class="btns"> 96 <a href="javascript:void(0);" class="leftBtn" id="leftBtn"><</a> 97 <a href="javascript:void(0);" class="rightBtn" id="rightBtn">></a> 98 </div> 99 <div class="circles" id="circles"> 100 <ol> 101 <li class="cur">1</li> 102 <li>2</li> 103 <li>3</li> 104 <li>4</li> 105 <li>5</li> 106 <li>6</li> 107 <li>7</li> 108 </ol> 109 </div> 110 </div> 111 <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> 112 <script type="text/javascript"> 113 // 获取元素 114 var $carousel = $("#carousel"); 115 var $imgLis = $("#imgs ul li"); 116 var $leftBtn = $("#leftBtn"); 117 var $rightBtn = $("#rightBtn"); 118 var $circlesLis = $("#circles ol li"); 119 var amount = $imgLis.length; 120 121 122 // 信号量 123 var idx = 0; 124 125 126 // 定时器 127 var timer = setInterval(rightBtnFun,3000); 128 129 // 鼠标进入停止定时器 130 $carousel.mouseenter(function(){ 131 clearInterval(timer); 132 }); 133 134 // 鼠标离开重新开启定时器 135 $carousel.mouseleave(function(){ 136 // 设表先关 137 clearInterval(timer); 138 timer = setInterval(rightBtnFun,3000); 139 }); 140 141 // 右按钮点击事件 142 $rightBtn.click(rightBtnFun); 143 144 // 右按钮的点击事件 145 function rightBtnFun(){ 146 // 防流氓 147 if($imgLis.is(":animated")){ 148 return; 149 } 150 // 老图消失 151 $imgLis.eq(idx).fadeOut(500); 152 // 信号量改变 153 idx ++; 154 if(idx > amount - 1){ 155 idx = 0; 156 } 157 // 新图淡入 158 $imgLis.eq(idx).fadeIn(1000); 159 // 小圆点改变 160 $circlesLis.eq(idx).addClass("cur").siblings().removeClass("cur"); 161 } 162 163 164 // 左按钮点击事件 165 $leftBtn.click(function(){ 166 // 防流氓 167 if(!$imgLis.is(":animated")){ 168 // 老图消失 169 $imgLis.eq(idx).fadeOut(500); 170 // 信号量改变 171 idx --; 172 if(idx < 0){ 173 idx = amount - 1; 174 } 175 // 新图淡入 176 $imgLis.eq(idx).fadeIn(1000); 177 // 小圆点改变 178 $circlesLis.eq(idx).addClass("cur").siblings().removeClass( "cur"); 179 }; 180 }); 181 182 183 // 小圆点事件 184 $circlesLis.mouseenter(function(){ 185 // 老图淡出 186 $imgLis.eq(idx).stop(true).fadeOut(500); 187 // 信号量改变 188 idx = $(this).index(); 189 // 新图淡入 190 $imgLis.eq(idx).stop(true).fadeIn(1000); 191 // 校园点改变 192 $(this).addClass("cur").siblings().removeClass("cur"); 193 }); 194 195 196 197 198 199 200 201 202 203 204 205 206 207 </script> 208 </body> 209 </html>