爱站程序员基地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><script>$(function(){var $carousel = $(\"#myCarousel1\");var $left_btn = $(\"#myCarousel1 .carousel_btns .left\");var $right_btn = $(\"#myCarousel1 .carousel_btns .right\");var $carousel_images_lis = $(\"#myCarousel1 .carousel_images li\");var $carousel_nav_lis = $(\"#myCarousel1 .carousel_nav ol li\");//索引var idx = 0;//图片总量var imgCount = $carousel_images_lis.length;//定时器var timer = setInterval(right_btn_handler,2000);//当鼠标离开外面大盒子，停止定时器$carousel.mouseover(function(){clearInterval(timer);}).mouseout(function(){timer = setInterval(right_btn_handler,2000);});//右侧监听$right_btn.click(right_btn_handler);//右侧处理函数function right_btn_handler(){idx++;if(idx>imgCount-1){idx=0;}showPicAndSetCircles();}//左侧监听$left_btn.click(function(){idx--;if(idx<0){idx=imgCount-1;}showPicAndSetCircles();});//设置小圆点$carousel_nav_lis.mouseover(function(){idx = $(this).index();showPicAndSetCircles();});function showPicAndSetCircles(){$carousel_images_lis.eq(idx).addClass(\"cur\").siblings().removeClass(\"cur\");$carousel_nav_lis.eq(idx).addClass(\"cur\").siblings().removeClass(\"cur\");};});</script><style>*{margin: 0;padding: 0;}.carousel{width: 500px;height: 300px;margin: 50px auto;position: relative;}.carousel .carousel_images ul{list-style: none;}.carousel .carousel_images ul li{display: none;}.carousel .carousel_images ul li.cur{display: block !important ;}.carousel .carousel_images ul li img{width: 500px;height: 300px;}.carousel .carousel_nav{position: absolute;bottom: 0;right: 0;width: 123px;height: 24px;}.carousel .carousel_nav ol{list-style: none;}.carousel .carousel_nav ol li{float: left;width: 16px;height: 16px;margin-right: 6px;border-radius: 50%;background-color: #eee;opacity: 0.6;}.carousel .carousel_nav ol li.cur{background: darkred;}.carousel .carousel_btns .btn{position: absolute;width: 40px;height: 40px;border-radius: 20%;background-color: #ffd70085;}.carousel .carousel_btns .btn.left{top: 50%;left: 0;margin-top: -20px;margin-left: -20px;}.carousel .carousel_btns .btn.right{top: 50%;right: 0;margin-top: -20px;margin-right: -20px;}</style></head><body><div id=\"myCarousel1\" class=\"carousel\"><div class=\"carousel_images\"><ul><li style=\"display: none;\" class=\"cur\"><a href=\"javascript:;\"><img src=\"../测试图片/0.jpg\" alt=\"\"></a></li><li style=\"display: none;\"><a href=\"javascript:;\"><img src=\"../测试图片/1.jpg\" alt=\"\"></a></li><li style=\"display: none;\"><a href=\"javascript:;\"><img src=\"../测试图片/2.jpg\" alt=\"\"></a></li><li style=\"display: none;\"><a href=\"javascript:;\"><img src=\"../测试图片/3.jpg\" alt=\"\"></a></li><li style=\"display: none;\"><a href=\"javascript:;\"><img src=\"../测试图片/4.jpg\" alt=\"\"></a></li></ul></div><div class=\"carousel_nav\"><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>
效果图1
效果图2
图片资源：
