图片轮播 

  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>

 

posted @ 2020-03-17 23:20  就看你一眼  阅读(196)  评论(0)    收藏  举报