效果图

功能：1、幻灯片自动切换；2、点击下方小圆点切换对应幻灯片；3、点击左右两侧耳朵控制幻灯片切换至上一张或下一张；4、鼠标悬停幻灯片上时，幻灯片停止切换

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> <link rel="stylesheet" href="../css/reset.css"> <script src="./jquery-3.4.1.min.js"></script> <style type="text/css"> #box{ width: 100%; height: 350px; margin-top: 100px; } .bg0{background: #0D2736;} .bg1{background: #0F0909;} .bg2{background: #283F75;} .bg3{background: #405CDA;} #slide{ width: 800px; height: 350px; margin: 0 auto; position: relative; overflow: hidden; } #zxw{ width: 4000px; height: 35px; position: absolute; top: 0; left: 0px; } #zxw li{ float: left; } #zxw li a{ display: block; width: 800px; height: 350px; position: relative; } #zxw li a img{ width: 100%; height: 100%; } /* --------- */ #zxw li a span{ font-size: 150px; text-align: center; position: absolute; color: #fff;top: 100px; left: 350px; } /* ----------- */ #nav{ width: 160px; height: 20px; position: absolute; bottom: 10px; left: 50%; margin-left: -80px; } #nav li{ width: 20px; height: 20px; border-radius: 50%; background: #ccc; float: left; margin: 0 10px; cursor: pointer; } #nav .active{ background: blue; } #prev, #next{ width: 25px; height: 50px; background: #fff; position: absolute; top: 150px; cursor: pointer; } #prev{ left: 10px; } #next{ right: 10px; } #prev img, #next img{ width: 100%; height: 100%; } </style> <script> $(function(){ // 全局变量 var c = 0; var zxw = $("#zxw li"); var nav = $("#nav li"); // 定义幻灯片自动切换效果 function ziDongQieHuan(){ c++; //c = 1 2 if(c == zxw.length){ c = 1; $("#zxw").css({left:0}); } $("#zxw").animate({left:c*-800+"px"}, 500); // 定义小圆点和背景颜色自动切换效果 if(c == nav.length){ $("#nav li").eq(0).addClass("active").siblings("li").removeClass("active"); $("#box").attr("class", "bg0") }else{ $("#nav li").eq(c).addClass("active").siblings("li").removeClass("active"); $("#box").attr("class", "bg"+c); }; }; // 定义点击小圆点切换效果 function dianJiQieHuan(obj){ // 获取当前点击对象的下标值 c = obj.index(); $("#nav li").eq(c).addClass("active").siblings("li").removeClass("active"); $("#zxw").animate({left:c*-800+"px"}, 500); $("#box").attr("class", "bg"+c); }; // 定义点击左耳朵切换效果 function prev(){ c--; if(c<0){ c = nav.length-1; }; $("#nav li").eq(c).addClass("active").siblings("li").removeClass("active"); $("#zxw").animate({left:c*-800+"px"}, 500); $("#box").attr("class", "bg"+c); }; // 定义点击右耳朵切换效果 function next(){ c++; if(c > nav.length-1){ c = 0; }; $("#nav li").eq(c).addClass("active").siblings("li").removeClass("active"); $("#zxw").animate({left:c*-800+"px"}, 500); $("#box").attr("class", "bg"+c); }; // 定时器，每2秒执行一次 var time = setInterval(ziDongQieHuan, 2000); // 鼠标移入#box元素中，停止定时器 $("#slide").mouseenter(function(){ clearInterval(time); }); // 鼠标移出#box元素后，开始定时器 $("#slide").mouseleave(function(){ //鼠标移出时，开始定时器，并将定时器赋值给time变量，而当鼠标再次移入时，则刚好删除上次的定时器，不会累加 time = setInterval(ziDongQieHuan, 2000); }); // 定义小圆点点击事件 $("#nav li").click(function(){ // $(this):当前点击的对象 dianJiQieHuan($(this)); }); // 定义左耳朵点击事件 $("#prev").click(function(){ prev(); }); // 定义右耳朵点击事件 $("#next").click(function(){ next(); }); }); </script> </head> <body> <!-- 最外层盒子开始 --> <div id="box" class="bg0"> <!-- 幻灯片盒子开始 --> <div id="slide"> <!-- 幻灯片开始 --> <ul id="zxw"> <li><a href="#"> <img src="https://www.51zxw.net/NewAn/UploadFiles/20200609/202006090520504133.jpg"> <span>0</span> </a></li> <li><a href="#"> <img src="https://www.51zxw.net/NewAn/UploadFiles/20200608/202006080410588630.jpg"> <span>1</span> </a></li> <li><a href="#"> <img src="https://www.51zxw.net/NewAn/UploadFiles/20200608/202006080408097382.jpg"> <span>2</span> </a></li> <li><a href="#"> <img src="https://www.51zxw.net/NewAn/UploadFiles/20200624/202006240832286533.jpg"> <span>3</span> </a></li> <li><a href="#"> <img src="https://www.51zxw.net/NewAn/UploadFiles/20200609/202006090520504133.jpg"> <span>4</span> </a></li> </ul> <!-- 幻灯片结束 --> <!-- 小圆点开始 --> <ul id="nav"> <li class="active"></li> <li></li> <li></li> <li></li> </ul> <!-- 小圆点结束 --> <!-- 左右两侧耳朵开始 --> <div id="prev"><img src="./prev.png"></div> <div id="next"><img src="./next.png"></div> <!-- 左右两侧耳朵结束 --> </div> <!-- 幻灯片盒子结束 --> </div> <!-- 最外层盒子结束 --> </body> </html>

reset.css

*{margin: 0; padding: 0; box-sizing: border-box;} body{font-size:16px; font-family:"微软雅黑"; color: #333;} b{font-weight: normal;} i{font-style: normal;} a, a:hover, a:active{text-decoration: none; color: #333;} input,textarea,select{outline: none;} img{border: none; vertical-align: middle;} li{list-style-type: none;} .fl{float: left;} .fr{float: right;} .cl{clear: both;} .clearfix::after{ content: ""; display: table; clear: both; }