1   2   3   4   5 呼吸灯效果  6   7   8   9  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 " _ue_custom_node_="true"> 56  57  58  59  60  61      62          63              64              65              66          67          68             < 69             > 70          71          72             123 73          74      75  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 " _ue_custom_node_="true">126 127 128