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 .carousel{ 12 height:665px; 13 overflow: hidden; 14 position: relative; 15 } 16 .carousel .imgs{ 17 1920px; 18 height:665px; 19 position: absolute; 20 left:50%; 21 margin-left: -960px; 22 } 23 .carousel .imgs li{ 24 /*呼吸轮播图所有图片摞一起*/ 25 position: absolute; 26 left:0; 27 top:0; 28 100%; 29 height:665px; 30 display: none; 31 } 32 .carousel .imgs li:first-child{ 33 display: block; 34 } 35 .carousel .inner{ 36 1000px; 37 margin:0 auto; 38 position: relative; 39 } 40 .carousel .inner .circles{ 41 list-style: none; 42 position: absolute; 43 15px; 44 height:257px; 45 background: url(images/longxi/list_boxbg.png) repeat-y center top; 46 top:150px; 47 } 48 .carousel .inner .circles li{ 49 15px; 50 height: 15px; 51 background: url(images/longxi/num_bg.png) no-repeat; 52 margin-bottom: 70px; 53 position: relative; 54 } 55 .carousel .inner .circles li a{ 56 position: absolute; 57 104px; 58 height: 43px; 59 background: url(images/longxi/num_hover.png); 60 left:-77px; 61 top:-17px; 62 display: none; 63 } 64 .carousel .inner .circles li.cur a{ 65 display: block; 66 } 67 .carousel .inner .circles li:nth-child(2) a{ 68 background-image: url(images/longxi/num_hover2.png); 69 } 70 .carousel .inner .circles li:nth-child(3) a{ 71 background-image: url(images/longxi/num_hover3.png); 72 } 73 .carousel .inner .circles li:nth-child(4) a{ 74 background-image: url(images/longxi/num_hover4.png); 75 } 76 </style> 77 </head> 78 <body> 79 <div class="carousel" id="carousel"> 80 <div class="imgs" id="imgs"> 81 <ul> 82 <li><img src="images/longxi/1.jpg" alt=""></li> 83 <li><img src="images/longxi/2.jpg" alt=""></li> 84 <li><img src="images/longxi/3.jpg" alt=""></li> 85 <li><img src="images/longxi/4.jpg" alt=""></li> 86 </ul> 87 </div> 88 <div class="inner"> 89 <ol class="circles" id="circles"> 90 <li class="cur"><a href=""></a></li> 91 <li><a href=""></a></li> 92 <li><a href=""></a></li> 93 <li><a href=""></a></li> 94 </ol> 95 </div> 96 </div> 97 <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> 98 <script type="text/javascript"> 99 // 获取元素 100 var $imgLis = $("#imgs ul li"); 101 var $carousel = $("#carousel"); 102 var $circles = $("#circles li"); 103 var amount = $imgLis.length; 104 105 106 // 信号量 107 var idx = 0; 108 // 页面加载后开启定时 109 var timer = setInterval(rightBtnFun, 3000); 110 // 鼠标进入停止定时器 111 $carousel.mouseenter(function(){ 112 clearInterval(timer); 113 }); 114 // 鼠标离开重新开启定时器 115 $carousel.mouseleave(function(){ 116 // 设表先关 117 clearInterval(timer); 118 timer = setInterval(rightBtnFun, 3000); 119 }); 120 121 122 // 小圆点的鼠标进入事件 123 $circles.mouseenter(function(){ 124 // 老图淡出 125 $imgLis.eq(idx).stop(true).fadeOut(800); 126 // 信号量 127 idx = $(this).index(); 128 // 新图淡入 129 $imgLis.eq(idx).stop(true).fadeIn(1000); 130 // 小圆点改变 131 $(this).addClass("cur").siblings().removeClass("cur"); 132 }); 133 // 右按钮的点击事件 134 function rightBtnFun(){ 135 // 当元素不运动时才执行事件 136 if(!$imgLis.is(":animated")){ 137 // 老图淡出 138 $imgLis.eq(idx).fadeOut(800); 139 // 信号量 140 idx ++; 141 if(idx > amount - 1){ 142 idx = 0; 143 } 144 // 新图淡入 145 $imgLis.eq(idx).fadeIn(1000); 146 // 小圆点事件 147 $circles.eq(idx).addClass("cur").siblings().removeClass("cur"); 148 } 149 } 150 </script> 151 </body> 152 </html>