本文主要是介绍js轮播图有，移入移出事件，左右滑动事件功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
效果图：
具体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<style>* {margin: 0;padding: 0;}.banner {width: 100%;height: 500px;overflow: hidden;position: relative;}.tow {width: 600%;height: 500px;margin-left:0%;display: flex;display: relative;/* transition: 1s all ; */}.tow img {width: 100%;height: 100%;}.five {position: absolute;bottom: 0px;left: 50%;transform: translateX(-50%);display: flex;bottom: 0;border: 1px solid lightgray;}.five span {width: 15px;height: 15px;display: block;background-color: antiquewhite;border-radius: 50%;display: flex;}.but {width: 100%;height: 30px;position: absolute;border-radius: 50%;top: 37%;display: flex;justify-content: space-between;}.but span {display: none;background-color: aqua;}.banner:hover .but span {display: block;}
</style>
<body>
<div class="banner"><div class="tow"><img src="img/ou.jpg" alt="" class="mlShow"><img src="img/oui.jpg" alt=""><img src="img/tu.jpg" alt=""><img src="img/opp.jpg" alt=""><img src="img/iu.jpg" alt="" /><img src="img/yu.jpg" alt="" /></div><div class="five"></div><div class="but"><span><</span><span class="one">></span></div>
</div>
<script>let banner = document.getElementsByClassName('banner')[0];//获取所有内容的标签let tow = document.getElementsByClassName('tow')[0];//获取所有图片的标签let img = tow.children; //获取图片子元素let imgWidth = img[0].offsetWidth;//图片宽度自适应let five = document.getElementsByClassName('five')[0];//获取所有小圆点的标签let but = document.getElementsByClassName('but')[0];//获取所有按钮的标签let butItem = but.children;//获取按钮子元素let index = 0;//初始下标为零let times = setInterval(scrolls, 2000); //设置定时器// 动态生成小圆点for (let i = 0; i < img.length; i++) {let dot = document.createElement('span'); // 创建一个 span 元素dot.classList.add('dot'); // 添加 dot 类名five.appendChild(dot); // 将创建的小圆点添加到五个按钮的容器中}function scrolls() { //设置轮播函数console.log(index);if (index < img.length - 1) {//判断当前页的长度，如果小于img图片的长度index++; //自增至最后一张图片tow.style.marginLeft = -index * imgWidth + "px";} else { //不小于3变为0第一张index=0 //跳转至轮播初始位置tow.style.marginLeft = -index * imgWidth + "px";}console.log(index);// 修改小圆点颜色let span = five.children;for (let i = 0; i < span.length; i++) {//循环小圆点span[i].style.backgroundColor = "rgba(255, 255, 255, 0.6)"; //将其背景颜色变为白色}span[index].style.backgroundColor = "rgba(0, 0, 255, 0.6)";//图片轮播到第几张时把对应的小圆点变为蓝色}//鼠标移入banner.onmouseover = function() {clearInterval(times); //清除定时器}// 鼠标移出banner.onmouseout = function() {times = setInterval(scrolls, 2000);//开启定时器butItem[0].onclick = function() {//按钮绑定点击事件if (index > 0) {index--;} else if(index==0) {index = img.length - 1; //随后一张图片}tow.style.marginLeft = -index * imgWidth + "px";for (let i = 0; i < span.length; i++) {span[i].style.backgroundColor = "rgba(255, 255, 255, 0.6)";}span[index].style.backgroundColor = 'rgba(0, 0, 255, 0.6)';//同上}}butItem[1].onclick = scrolls; //向右点击调用轮播函数
</script>
</body>
</html>具体的轮播可以根据需求进行调整；希望可以帮到大家；
这篇关于js轮播图有，移入移出事件，左右滑动事件功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
