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