jQuery实现呼吸灯轮播图

首页 / 新闻资讯 / 正文

jQuery实现呼吸灯轮播图

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>呼吸灯轮播图</title>     <script src="../jquery-3.1.1.js"></script>     <style type="text/css">         *{             margin: 0;             padding: 0;         }         img{             width: 650px;             height: 360px;         }         .carousel{             width: 650px;             height: 360px;             margin: 100px auto;             position: relative;         }         .carousel .carousel_images .unit{             list-style: none;             width: 520px;             height: 280px;             position: relative;         }         .carousel .carousel_images .unit li{             top: 0;             left: 0;             width: 520px;             height: 280px;             display: none;             position: absolute;         }         .carousel .carousel_images .unit li.first{             display: block;         }         .carousel .carousel_navs{             bottom: 0;             right: 0;             width: 123px;             height: 24px;             position: absolute;         }         .carousel .carousel_navs ol{             list-style: none;         }         .carousel .carousel_navs ol li{             float: left;             width: 16px;             height: 16px;             margin-right: 6px;             border-radius: 50%;             background-color: #eee;             opacity: 0.6;         }         .carousel .carousel_navs ol li.cur{             background: darkred;         }         .carousel .carousel_btns .btn{             widows: 40px;             height: 40px;             border-radius: 20%;             background-color: #ffd700;             text-align: center;             line-height: 40px;             position: absolute;             font-size: 30px;             font-family: "楷体";             text-decoration: none;             color: #333;             font-weight: bold;         }         .carousel .carousel_btns .btn.left{             top: 50%;             left: 10px;             margin-top: -20px;         }         .carousel .carousel_btns .btn.right{             top: 50%;             right: 10px;             margin-top: -20px;         }      </style>     <script>         $(function(){         var $unit = $(".carousel_images ul");  //获取图像         var $btn_left = $(".carousel_btns .left"); //左侧按钮         var $btn_right = $(".carousel_btns .right"); //右侧按钮         var $carousel_navs_lis = $(".carousel_navs ol li"); //小圆点         var imgs = $(".carousel_images ul li").length; //图片数量         var idx = 0;  //索引量          //设置自动播放         var timer = setInterval(change,1000);         //右侧单击响应函数         $btn_right.click(change);         //封装         function change(){             //防多次点击             if($unit.is(":animated")){                 return;             }             //旧图淡出             $unit.find("li").eq(idx).fadeOut('fast');             //新图淡入             //防溢出             idx++;             if(idx>imgs-1){                 idx = 0;             }             $unit.find("li").eq(idx).fadeIn('fast');             //小圆点变化             $carousel_navs_lis.eq(idx).addClass("cur").siblings().removeClass("cur");         };         //设置鼠标移入时，页面定时器停止，移除后继续         $unit.mouseover(function(){             clearInterval(timer);         }).mouseleave(function(){             timer = setInterval(change,1000);         });         //左侧单击响应函数         $btn_left.click(function(){             //防多次点击             if($unit.is(":animated")){                 return;             }             //旧图淡出             $unit.find("li").eq(idx).fadeOut('fast');             //新图淡入             //防溢出             idx--;             if(idx<0){                 idx = imgs-1;             }             $unit.find("li").eq(idx).fadeIn('fast');             //小圆点变化             $carousel_navs_lis.eq(idx).addClass("cur").siblings().removeClass("cur");         });         //鼠标滑过小圆点时响应函数         $carousel_navs_lis.mouseover(function(){             //防多次点击             if($unit.is(":animated")){                 return;             }             //旧图淡出             $unit.find("li").eq(idx).fadeOut('fast');             //新图淡入             idx = $(this).index();             $unit.find("li").eq(idx).fadeIn('fast');             //小圆点变化             $carousel_navs_lis.eq(idx).addClass("cur").siblings().removeClass("cur");         });          });     </script> </head> <body>     <div class="carousel" id="carousel">         <div class="carousel_images">             <ul class="unit">                 <li class="first">                     <img src="../测试图片/0.jpg" alt="">                 </li>                 <li>                     <a href="">                         <img src="../测试图片/1.jpg" alt="">                     </a>                 </li>                 <li>                     <a href="">                         <img src="../测试图片/2.jpg" alt="">                     </a>                 </li>                 <li>                     <a href="">                         <img src="../测试图片/3.jpg" alt="">                     </a>                 </li>                 <li>                     <a href="">                         <img src="../测试图片/4.jpg" alt="">                     </a>                 </li>             </ul>         </div>         <div class="carousel_navs">             <ol>                 <li class="cur"></li>                 <li></li>                 <li></li>                 <li></li>                 <li></li>             </ol>         </div>         <div class="carousel_btns">             <a href="javascript:;" class="btn left">&lt;</a>             <a href="javascript:;" class="btn right">&gt;</a>         </div>     </div> </body> </html>

上一个：在Git中进行忽略文件操作详解_在线工具

下一个：动物疫苗定义是什么意思（动物疫苗概念）

热门文章

归纳