<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自动轮播图</title> <style> div{ position: relative; } li{ width: 40px; height: 40px; line-height:40px; list-style: none; float: left; margin-left: 40px; border-radius:50%; background-color:white; border:1px solid red; text-align: center; } li:first-child{ background-color: red; } ul{ margin-top: -50px; position: absolute; z-index: 2; margin-left: 370px; } </style> </head> <body> <div> <img src="xq/tp/image00.jpg" height="1080" width="1920"/> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <script src="js/jquery-1.8.3.js"></script> <script> $(function (){ let index=0; a=setInterval(function (){ $("img").attr("src","xq/tp/image0"+index+".jpg") $("ul li").eq(index).css("background-color","red") $("ul li").eq(index).siblings().css("background-color","white") index++ if (index===5){ index=0; } },1000) $("img").hover(function (){ clearInterval(a) },function (){ a=setInterval(function (){ $("img").attr("src","xq/tp/image0"+index+".jpg") $("ul li").eq(index).css("background-color","red") $("ul li").eq(index).siblings().css("background-color","white") index++ if (index===5){ index=0; } },1000) }) $("ul li").click(function (){ let index1 = $(this).index(); index=index1; clearInterval(a) $("img").attr("src","xq/tp/image0"+index+".jpg") $("ul li").eq(index).css("background-color","red") $("ul li").eq(index).siblings().css("background-color","white") a=setInterval(function (){ $("img").attr("src","xq/tp/image0"+index+".jpg") $("ul li").eq(index).css("background-color","red") $("ul li").eq(index).siblings().css("background-color","white") index++ if (index===5){ index=0; } },1000) }) }) </script> </body> </html>