轮播图问题（web编程js代码）

web编程基础js代码。
求个人帮帮我改一下这段代码：想要写一个轮播图。其中“鼠标在轮播图上方悬停时，轮播图停止轮播；鼠标离开轮播图时，轮播图继续轮播”的功能运行不了，请帮我看一下改一改！！（css、js、html代码都给出了，救一下我吧！实在是不会了！）


```css

<style>
        *{
    margin: 0;
    padding: 0;
}
        li{
    list-style: none;
}
    .lunbo{
            position: relative;
            width:900px;
            height: 500px;
            margin:20px auto;
            overflow: hidden;
            box-shadow: 20px 30px 20px rgba(0,0,0,0.5);
        }
    .button{
            width: 100%;
            height: 100%;
            position: absolute;
            display: flex;
            justify-content: space-between;
            user-select: none;
        }
    #btn-left{
    width: 30px;
    height: 69px;
    margin: 215.5px 0;
    font-size: 30px;
    color: white;
    background-color:rgba(0,0,0,0.4);
    line-height: 69px;
    padding-left: 5px;
    cursor: pointer;
    opacity: 0;
        }
        #btn-right{
    width: 26px;
    height: 69px;
    margin: 215.5px 0;
    font-size: 30px;
    color: white;
    background-color:rgba(0,0,0,0.4);
    line-height: 69px;
    padding-left: 5px;
    cursor: pointer;
    opacity: 0;
    }
        .lunbo:hover #btn-left{
    opacity: 1;
        }
        .lunbo:hover #btn-right{
    opacity: 1;
        }
    #circle{
    height: 20px;
    display: flex;
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateY(-50%);
    overflow: hidden;
}
.circle{
    width: 10px;
    height: 10px;
    border-radius: 10px;
    border: 2px solid white;
    background: rgba(0,0,0,0.4);
    cursor: pointer;
    margin: 5px;
}
        .wenzi{
            width: 900px;
            height: 800px;
            background-color: aquamarine;
            margin: 100px auto;
        }
        .biaoti{
            width: 100px;
            height: 60px;
            background-color: coral;
            margin: 20px auto;
            text-align: center;
            line-height: 60px;
        }
        .content{
            background-color:cornflowerblue;
            width: 800px;
            height: 700px;
            margin: 20px auto;
        }
    </style>


<script>
    function change(type){
    var img=document.getElementById("myImg").src;
    var id=parseInt(img.substr(img.length-5,1));
    if(type==1){
        id=(id-1+3)%3;
    }else{
        id=(id+1)%3
    }
        document.getElementById("myImg").src=id+".jpg";
    }
    var left = document.getElementById("btn-left");
    var right = document.getElementById("btn-right");
    var imgs = document.querySelector("img");
    var circle=document.querySelectorAll(".circle");
    var index=0;
    var time;
        time= setInterval(function(){
                        change(2);
                          
                          },3000);
    
    const lunbo=document.querySelector(".lunbo");
    lunbo.addEventListener("mouseenter",function(){
        clearInterval(time);
    });
    lunbo.addEventListener("mouseleave",function(){
        time= setInterval(function(){
                        change(2);
                          
                          },3000);
    });
    
    
    </script>


```html
<body>
    <div class="lunbo">
        <img src="1.jpg" alt="图片无法加载" style="width:100%; height:100%;display: flex;position: absolute;left: 0;transition: .2s" id="myImg">
        <div class="button">
        <div id="btn-left" onClick="change(1)">&laquo;</div>
        <div id="btn-right" onClick="change(2)">&raquo;</div>
        </div>
        <ul id="circle">
                <li class="circle"></li>
                <li class="circle"></li>
                <li class="circle"></li>
        </ul>
    </div>
    <div class="wenzi">
    <div class="biaoti">
        1111
        </div>
    <div class="content">
        22222222
        </div>
    </div>
</body>

这样，把你的样式和js哟全部去掉，根据你的html重新写了给你参考，效果是给这个html页面上的图片设置成2秒自动轮播图，鼠标放在轮播图片上时候轮播停止，鼠标松开继续轮播，代码参考如下，CSS实现：

.lunbo {
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden;
}

.button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-between;
 }
 
#btn-left,
#btn-right {
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background-color: #333;
  color: #fff;
  cursor: pointer;
  opacity: 0.5;
}

#circle {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.circle {
  width: 8px;
  height: 8px;
  background-color: #ccc;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
  opacity: 0.6;
}

.circle.active {
  background-color: #333;
  opacity: 1;
}

JS实现：

let myImg = document.getElementById('myImg');
let circle = document.getElementsByClassName('circle');
let index = 1;
let timer;

// 将当前选中的按钮设置为active
let showButton = (index) => {
  for (let i = 0; i < circle.length; i++) {
    if (circle[i].classList.contains('active')) {
      circle[i].classList.remove('active');
    }
  }
  circle[index - 1].classList.add('active');
}

// 偏移图片
let offsetImg = (offset) => {
  let left = parseInt(myImg.style.left) + offset;
  myImg.style.left = left + '%';
  // 无缝连接
  if (left < -200) {
    myImg.style.left = '-100%';
  } else if (left > -100) {
    myImg.style.left = '-200%';
  }
}

// 自动轮播
let autoPlay = () => {
  timer = setInterval(() => {
    index += 1;
    if (index > 3) {
      index = 1;
    }
    showButton(index);
    offsetImg(-100);
  }, 2000)
}
autoPlay();

// 暂停轮播
myImg.onmouseover = () => {
  clearInterval(timer);
}

// 继续轮播
myImg.onmouseout = () => {
  autoPlay();
}

// 按钮切换图片
for (let i = 0; i < circle.length; i++) {
  circle[i].onclick = () => {
    let clickIndex = parseInt(circle[i].getAttribute('index'));
    let offset = (index - clickIndex) * -100;
    offsetImg(offset);
    index = clickIndex;
    showButton(index);
  }
}

// 左右按钮切换图片
let change = (offset) => {
  index += offset;
  if (index > 3) {
    index = 1;
  } else if (index < 1) {
    index = 3;
  }
  showButton(index);
  offsetImg(-100 * offset);
}
document.getElementById('btn-left').onclick = () => {
  change(-1);
}
document.getElementById('btn-right').onclick = () => {
  change(1);
}

不知道你这个问题是否已经解决, 如果还没有解决的话:

帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7757532
这篇博客你也可以参考下：写js文件，如何在html里面用到js文件里面的内容？如何写一个js文件能使其在html中被使用。

除此之外, 这篇博客: 用JS在html页面实现打印功能中的 打印方式三（此方式会重新打开一个浏览器窗口）： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:

1.javascript中方法为：

	//打印操作
	function print() {
		var userAgent = navigator.userAgent.toLowerCase(); //取得浏览器的userAgent字符串
		if (userAgent.indexOf("trident") > -1) {
			alert("请使用google或者360浏览器打印");
			return false;
		} else if (userAgent.indexOf('msie') > -1) {
			var onlyChoseAlert = simpleAlert({
				"content" : "请使用Google或者360浏览器打印",
				"buttons" : {
					"确定" : function() {
						onlyChoseAlert.close();
					}
				}
			})
			alert("请使用google或者360浏览器打印");
			return false;
		} else {//其它浏览器使用lodop
			var oldstr = document.body.innerHTML;
			var headstr = "<html><head><title></title></head><body>";
			var footstr = "</body></html>";
			//执行隐藏打印区域不需要打印的内容
			document.getElementById("otherpho").style.display="none";
			var printData = document.getElementById("studentPhoTable").innerHTML; //获得 div 里的所有 html 数据
			var wind = window.open("", "newwin",
					"toolbar=no,scrollbars=yes,menubar=no");
			wind.document.body.innerHTML = headstr + printData + footstr;
			wind.print();
			//打印结束后，放开隐藏内容
			document.getElementById("otherpho").style.display="block";
			wind.close();
			window.document.body.innerHTML = oldstr;
		}
	}
</script>

2.页面内容如下：

	...
<!--打印内容开始-->
<div id='studentPhoTable'>
    ...
</div>
<!--打印内容结束-->
	...

3.页面中放置一个打印按钮：

<input type="button" onclick="print()"  value="确定打印" />

谨记：javascript中方法的名称千万不要命成function print()

以下回答来自chatgpt:
1. 你使用的是哪种轮播图插件或是自己手写的？
2. 你目前的代码问题出在哪里？鼠标悬停时轮播图停止的代码无法正常运行？
3. 你所用的轮播图插件或代码是否支持鼠标悬停停止轮播的功能？如果不支持，你需要向代码中添加什么样的代码来实现这个功能？
4. 你所使用的代码中是否已经有监听鼠标进入/离开元素的事件？如果有，请分享这部分代码。
5. 你的轮播图是否需要在停止轮播时保持当前的图片状态，还是需要直接回到第一张图片重新开始轮播？

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

您提供的代码中，几乎没有问题，只需要稍作修改即可让轮播图实现鼠标悬停时停止轮播的功能。主要问题在于获取图片元素的方式和绑定事件的时机。以下是修改后的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        /* CSS样式省略，不作修改 */
    </style>
</head>
<body>
    <div class="lunbo">
        <img src="1.jpg" alt="图片无法加载" style="width:100%; height:100%;display: flex;position: absolute;left: 0;transition: .2s" id="myImg">
        <div class="button">
            <div id="btn-left" onClick="change(1)">&laquo;</div>
            <div id="btn-right" onClick="change(2)">&raquo;</div>
        </div>
        <ul id="circle">
            <li class="circle"></li>
            <li class="circle"></li>
            <li class="circle"></li>
        </ul>
    </div>
    <div class="wenzi">
        <div class="biaoti">
            1111
        </div>
        <div class="content">
            22222222
        </div>
    </div>
    <script>
        var img = document.getElementById("myImg");
        var circle = document.querySelectorAll(".circle");
        var index = 0;
        var time;

        function change(type) {
            var imgSrc = img.src;
            var id = parseInt(imgSrc.substr(imgSrc.length - 5, 1));
            if (type === 1) {
                id = (id - 1 + 3) % 3;
            } else {
                id = (id + 1) % 3;
            }
            img.src = id + ".jpg";
        }

        function startAutoPlay() {
            time = setInterval(function () {
                change(2);
            }, 3000);
        }

        function stopAutoPlay() {
            clearInterval(time);
        }

        const lunbo = document.querySelector(".lunbo");
        lunbo.addEventListener("mouseenter", stopAutoPlay);
        lunbo.addEventListener("mouseleave", startAutoPlay);

        startAutoPlay();
    </script>
</body>
</html>

主要修改的地方有：

将获取图片元素img的操作放在脚本中，以便后续在鼠标悬停和离开事件中使用。
将轮播图的自动播放逻辑封装成两个函数startAutoPlay()和stopAutoPlay()，分别用于启动和停止自动播放。在鼠标悬停事件mouseenter和离开事件mouseleave中调用这两个函数来实现暂停和继续轮播的功能。
在页面加载后立即调用startAutoPlay()函数，开始轮播。