1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>呼吸灯效果</title> 6 <!--适应移动端--> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <!--css样式--> 9 <style> 10 11 *{margin:0;padding:0;list-style:none;} 12 .slider{350px;height:228px;overflow: hidden; 13 position:relative; 14 } 15 img{350px;height:228px; } 16 .slider li{position :absolute;display:none; } 17 .slider li:first-child{ 18 display:block; 19 } 20 .arrow{display:none ; } 21 .slider:hover .arrow{display:block; } 22 .arrow-left,.arrow-right{position:absolute; top:50%; 23 margin-top:-30px; 24 width :30px; 25 height:60px; 26 line-height:60px; 27 text-align:center; 28 color:#fff; 29 font-size:30px; 30 font-weight:700; 31 background:rgba(0,0,0,0.1); 32 cursor:pointer; 33 } 34 .arrow-left:hover,.arrow-right:hover{ 35 background-color:rgba(0,0,0,.5); 36 } 37 .arrow-left{left:0;} 38 .arrow-right{right:0;} 39 .circle{position :absolute; 40 top:200px; 41 right :50px;} 42 .circle i{ 43 float :left;/*脱离文档流，变成块元数*/ 44 20px;height:20px; 45 background-color:rgba(255,255,255,.6); ; 46 margin :0 10px; 47 text-align :center ; 48 border-radius:10px; 49 color :red ; 50 } 51 .circle i:hover{ 52 background-color:rgba(255,0,0,.5); 53 color :#fff; 54 } 55 </style> 56 <!--引用jquery库--> 57 <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> 58 </head> 59 60 <body> 61 <div class="slider"> 62 <ul> 63 <li><a><img src="https://www.w3school.com.cn/i/eg_tulip.jpg"></a></li> 64 <li><a><img src="https://www.w3school.com.cn/i/eg_chinarose.jpg"></a></li> 65 <li><a><img src="https://www.runoob.com/images/pulpit.jpg"></a></li> 66 </ul> 67 <div class="arrow"> 68 <span class="arrow-left"><</span> 69 <span class="arrow-right">></span> 70 </div> 71 <div class="circle"> 72 <i class="c1">1</i><i class="c2">2</i><i class="c3">3</i> 73 </div> 74 </div> 75 <script type="text/javascript"> 76 $(function(){ 77 //文档加载完成执行下面内容 78 var count=0; 79 var timer=null; 80 $(".arrow-right").click(function (){ 81 count++; 82 //count区间0,1,2 83 if(count==$(".slider li").length ){ 84 count=0; 85 } 86 //alert(count); 87 $(".slider li").eq(count).fadeIn().siblings("li").fadeOut(); 88 $(".circle i").eq(count).css({"backgroundColor":"rgba(255,0,0,.5)","color":"#fff"}).siblings("i").css({"background-color":"rgba(255,255,255,.6)","color":"red"}); 89 }); 90 91 $(".arrow-left").click(function (){ 92 count--; 93 if(count==-1){ 94 count=$(".slider li").length-1; 95 } 96 //alert(count); 97 $(".slider li").eq(count).fadeIn().siblings("li").fadeOut(); 98 $(".circle i").eq(count).css({"backgroundColor":"rgba(255,0,0,.5)","color":"#fff"}).siblings("i").css({"background-color":"rgba(255,255,255,.6)","color":"red"}); 99 }); 100 101 102 103 104 $(".circle i").mouseover(function (){ 105 var _index=$(this).index(); 106 $(".slider li").eq(_index).fadeIn().siblings("li").fadeOut(); 107 $(".circle i").eq(_index).css({"backgroundColor":"rgba(255,0,0,.5)","color":"#fff"}).siblings("i").css({"background-color":"rgba(255,255,255,.6)","color":"red"}); 108 count=_index; 109 }); 110 timer=setInterval(myFunc,2000); 111 function myFunc(){ 112 count++; 113 if(count==$(".slider li").length){ 114 count=0; 115 } 116 $(".slider li").eq(count).fadeIn().siblings("li").fadeOut(); 117 $(".circle i").eq(count).css({"backgroundColor":"rgba(255,0,0,.5)","color":"#fff"}).siblings("i").css({"background-color":"rgba(255,255,255,.6)","color":"red"}); 118 } 119 $(".slider").hover(function (){ 120 clearInterval(timer); 121 },function (){ 122 timer=setInterval(myFunc,2000); 123 }); 124 }); 125 </script> 126 127 </body> 128 </html>