爱站程序员基地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: 560px;height: 300px;}.carousel{width: 560px;height: 300px;border: 1px solid #9e9e9e;overflow: hidden;margin: 50px auto;}.carousel #unit{list-style: none;width: 4000px;position: relative;}.carousel ul li{float: left;}.carousel .btns a{position: absolute;width: 30px;height: 70px;top: 50%;margin-top: -35px;background-color: rgba(0, 0, 0, 0.73);text-align: center;line-height: 70px;text-decoration: none;color: red;font-family: \"楷体\";border-radius: 4px;}.carousel .btns a.btn_left{top: 200px;left: 480px;}.carousel .btns a.btn_right{top: 200px;right: 480px;}.circles{width: 120px;height: 20px;bottom: 380px;left: 60%;margin-left: -60px;position: absolute;}.circles ol{list-style: none;}.circles ol li{width: 16px;height: 16px;margin-right: 10px;background-color: white;border-radius: 50%;float: left;}.circles ol li.cur{background-color: red;}.circles ol li.last{margin-right: 0;}</style><script>$(function(){var $unit = $(\"#unit\"); //盒子var $btn_right = $(\"#btn_right\"); //右侧按钮var $btn_left = $(\"#btn_left\"); //左侧按钮var $circles_lis = $(\"#circles ol li\"); //小圆点var imgs= $unit.children(\"li\").length; //li的个数//无缝链接：增加个第一张图，当第一张图显示后，将整个列移动至0px处//增加个第一张图//下面这行可有可无// $unit.children(\"li:first\").clone().appendTo($unit);var idx = 0; //索引//设置自动播放var timer = setInterval(leftchange,1000);//为右侧绑定响应函数$btn_right.click(leftchange);//设置当鼠标移动到轮播图时，停止播放，当鼠标离开时继续播放$unit.mouseover(function(){clearInterval(timer);}).mouseleave(function(){timer = setInterval(leftchange,1000);});function leftchange(){//防多点if($unit.is(\":animated\")){return false;}idx++;if(idx>imgs-1){ //当右点击到第一张后，继续点击右键时，将left移动到0px处idx=0;$unit.css({\"left\":0});}$unit.animate({\"left\":idx * -560},1000);$circles_lis.eq(idx).addClass(\"cur\").siblings().removeClass(\"cur\");};//为左侧绑定响应函数$btn_left.click(function(){//防多点if($unit.is(\":animated\")){return false;}idx--;if(idx<0){ //当左点击到第一张后，继续点击左键时，将left移动到2240px处idx=imgs-1;$unit.css({\"left\":-2240});}$unit.animate({\"left\":idx * -560},1000);$circles_lis.eq(idx).addClass(\"cur\").siblings().removeClass(\"cur\");});//为小圆点绑定函数$circles_lis.mouseover(function(){idx = $(this).index();$unit.stop(true).animate({\"left\":idx * -560},1000);$circles_lis.eq(idx).addClass(\"cur\").siblings().removeClass(\"cur\");});});</script></head><body><div id=\"carousel\" class=\"carousel\"><ul id=\"unit\"><li><img src=\"../测试图片/0.jpg\" alt=\"\"></li><li><img src=\"../测试图片/1.jpg\" alt=\"\"></li><li><img src=\"../测试图片/2.jpg\" alt=\"\"></li><li><img src=\"../测试图片/3.jpg\" alt=\"\"></li><li><img src=\"../测试图片/4.jpg\" alt=\"\"></li><!-- 加张第一张图，形成无缝连接 --></ul><div class=\"btns\"><a href=\"javascript:;\" id=\"btn_left\" class=\"btn_left\"><</a><a href=\"javascript:;\" id=\"btn_right\" class=\"btn_right\">></a></div><div class=\"circles\" id=\"circles\"><ol><li class=\"cur\"></li><li></li><li></li><li></li><li class=\"last\"></li></ol></div></div></body></html>
效果图：
图片资源：
