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{width:350px;height:228px;overflow: hidden;
13 position:relative;
14 }
15 img{width: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 width: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>
