爱站程序员基地jQuery实现呼吸灯轮播图
- 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\"><</a><a href=\"javascript:;\" class=\"btn right\">></a></div></div></body></html>
效果图：
图片资源：
