JS+CSS轮播图，触摸停止，上一页下一页，京东轮播图，按钮随机颜色-CSDN博客

本文链接：https://blog.csdn.net/weixin_42488035/article/details/107512953
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="Shortcut Icon" href="" />
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;

			}

			#root {
				width: 1500px;
				height: 1000px;
				/* background-color: aliceblue; */
				margin: 0 auto;
				position: relative;
			}

			img {
				width: 100%;
				height: 100%;
				clear: both;
			}

			.two {
				/* width: 0px; */
				/* height: 0px; */
				position: absolute;
				/* float: left; */
				/* z-index:2; */
				left: 10px;
				bottom: 10px;
				/* margin:0 auto; */
				clear: both;
			}

			.two p {
				width: 50px;
				height: 50px;
				background-color: #FFFFFF;
				opacity: 0.8;
				/* float: left; */
				border-radius: 50%;
				margin-left: 10px;
				display: inline-block;
				clear: both;
			}

			#div1 {
				position: absolute;
				width: 60px;
				height: 100px;
				float: left;
				left: 20px;
				bottom: 500px
			}

			#div2 {
				position: absolute;
				float: right;
				width: 60px;
				height: 100px;
				right: 20px;
				bottom: 500px
			}

			#div5 {
				width: 10px;
				height: 30px;
			}
		</style>
	</head>
	<body>
		<div id="root">
			<div id="div2">
				<img src="img/222.png">
			</div>
			<div id="div1">
				<img src="img/111.png">
			</div>
			<img src="img/1.jpg" id="img">
			<div class="two">
				<p></p>
				<p></p>
				<p></p>
				<!-- <p></p>
				<p></p> -->
			</div>

		</div>

	</body>
	<script type="text/javascript">
		// onmouseenter
		// onmouseleave
		var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg"];
		// var imgArr = ["img/img/1.png", "img/img/2.png", "img/img/3.png"];

		function val() {
			var a = Math.floor(Math.random() * 256);
			var b = Math.floor(Math.random() * 256);
			var c = Math.floor(Math.random() * 256);
			return "rgb(" + a + "," + b + "," + c + ")";
		}

		var divArray = document.querySelectorAll("#root .two p")
		var img = document.getElementById("img")
		var btn1 = document.getElementById("div1");
		var btn2 = document.getElementById("div2");
		//var img = document.querySelector("img");
		var count = 0;
		//鼠标离开
		function leave() {
			divArray[count].style.backgroundColor = "#FFFFFF";
		}

		function t(b) {
			for (var i = 0; i < divArray.length; i++) {
				divArray[i].style.backgroundColor = "#FFFFFF";
			}
			img.src = imgArr[b];
			divArray[b].style.backgroundColor = val();
		}
		for (var i = 0; i < divArray.length; i++) {
			divArray[i].index = i;

			divArray[i].onmouseenter = function tp() {
				console.log("123")
				t(this.index);
				count = this.index;
				num1()
				//return this.index;					  
			}
			divArray[i].onmouseleave = function() {
				leave();
			}
		}

		//下一页
		btn1.onclick = function top() {
			num1();
			count--;
			if (count >= 0) {
				img.src = imgArr[count];
			}
			if (count < 0) {
				count = imgArr.length - 1;
			}
			img.src = imgArr[count];
			t(count);
			btn1.onmouseleave = function() {
				leave();
			}
		}

		//下一页
		function below() {
			count++;
			if (count > imgArr.length - 1) {
				count = 0;
			}
			img.src = imgArr[count];
		}
		//下一页
		btn2.onclick = function() {
			num1();
			below();
			t(count);
			btn2.onmouseleave = function() {
				leave();
			}
		}
		//开始
		//setInterval(below,1000);			
		var num;
		var count = 0;
		num = setInterval("t(count)", 1000);
		num = setInterval(below1, 1000);

		function below1() {
			img.src = imgArr[count];
			count++;
			if (count > imgArr.length - 1) {
				count = 0;
			}
		}
		//停止
		function num1() {
			clearInterval(num);
		}
	</script>
</html>