爱站程序员基地效果展示：
HTML
[code]<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>jQuery实现轮播图</title><link rel=\"stylesheet\" type=\"text/css\" href=\"css/index.css\" /><script src=\'http://code.jquery.com/jquery-3.4.1.min.js\'></script><script src=\"js/index.js\" type=\"text/javascript\" charset=\"utf-8\"></script></head><body><div class=\"round\"><!--图片--><ul class=\"img\"><li style=\"display: block;\"><img src=\"./img/1.webp\" alt=\"\" /></li><li><img src=\"./img/2.webp\" alt=\"\" /></li><li><img src=\"./img/3.webp\" alt=\"\" /></li><li><img src=\"./img/4.webp\" alt=\"\" /></li><li><img src=\"./img/5.webp\" alt=\"\" /></li></ul><!--小圆点--><ul class=\"point\"><li style=\"background-color: red;\">1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><!--左右切换按钮--><div class=\"left-arrow arrow\"><</div><div class=\"right-arrow arrow\">></div></div></body></html>
CSS
[code]* {margin: 0;padding: 0;}li {list-style: none;}.round {width: 590px;height: 470px;margin: 120px auto;position: relative;}.img {width: 590px;height: 470px;overflow: hidden;}.img li {width: 590px;height: 470px;}.point {width: 150px;position: absolute;bottom: 40px;left: 50%;margin-left: -75px;}.point li {width: 15px;height: 15px;border-radius: 50%;background-color: #fff;display: inline-block;margin: 0 5px;cursor: pointer;line-height: 15px;text-align: center;font-size: 12px;}.arrow {width: 40px;height: 60px;font-size: 40px;color: #ccc;background-color: rgba(0, 0, 0, .2);position: absolute;top: 50%;margin-top: -30px;cursor: pointer;}.arrow:hover {color: #fff;background-color: rgba(0, 0, 0, .8);}.left-arrow {left: 0;}.right-arrow {right: 0;}
JS
[code]$(function() {let num = 0;let run = function() {num++;//5张轮播图if (num == 5) {num = 0;}//切换图片$(\".img li\").eq(num).fadeIn(500).siblings(\"li\").fadeOut(500);//切换角标$(\".point li\").eq(num).css(\"backgroundColor\",\"red\").siblings(\"li\").css(\"backgroundColor\", \"white\");}let timer = setInterval(run, 4000);//鼠标移到图片盒子上时停止轮播$(\".img\").hover(function() {clearInterval(timer);}, function() {timer = setInterval(run, 4000);})//鼠标移入到角标跳转到相应的图片$(\".point li\").mouseenter(function() {num = $(this).index();$(\".img li\").eq(num).fadeIn(500).siblings(\"li\").fadeOut(500);$(\".point li\").eq(num).css(\"backgroundColor\",\"red\").siblings(\"li\").css(\"backgroundColor\", \"white\");})//上一页$(\".left-arrow\").click(function() {//关闭定时器,跳转到上一页再重新计时,否则会出现刚跳到上一页,定时器就执行下一次的事件立马跳回到当前页clearInterval(timer);num--;if (num <0) {num = 4;}$(\".img li\").eq(num).fadeIn(500).siblings(\"li\").fadeOut(500);$(\".point li\").eq(num).css(\"backgroundColor\",\"red\").siblings(\"li\").css(\"backgroundColor\", \"white\");timer = setInterval(run, 4000);})//下一页$(\".right-arrow\").click(function() {clearInterval(timer);num++;if (num >4) {num = 0;}$(\".img li\").eq(num).fadeIn(500).siblings(\"li\").fadeOut(500);$(\".point li\").eq(num).css(\"backgroundColor\",\"red\").siblings(\"li\").css(\"backgroundColor\", \"white\");timer = setInterval(run, 4000);})})
