欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

图片轮播

程序员文章站 2022-06-19 10:45:37
1 2 3 4 5 呼吸灯效果 6 7
  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>