Js实现图片轮播，以及鼠标移动选择指定图片

最新推荐文章于 2023-01-13 00:22:49 发布

wwwwwwwl

最新推荐文章于 2023-01-13 00:22:49 发布

阅读量1.4k

点赞数

分类专栏： JavaScript 文章标签： javascript 图片轮播

本文链接：https://blog.csdn.net/wwwwwwwl/article/details/77341909

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				text-align: center;
			}
			
			#div1 {
				width: 800px;
				height: 300px;
				background-color: red;
				margin: 50px auto;
				position: relative;
			}
			
			#in1 {
				border: 1px black;
				position: absolute;
				right: 50px;
				bottom: 20px;
				background-color: pink;
				width: 30px;
				height: 30px;
				line-height: 30px;
				overflow: hidden;
			}
			
			#in2 {
				border: 1px black;
				position: absolute;
				right: 80px;
				bottom: 20px;
				background-color: pink;
				width: 30px;
				height: 30px;
				line-height: 30px;
				overflow: hidden;
			}
			
			#in3 {
				border: 1px black;
				position: absolute;
				right: 110px;
				bottom: 20px;
				background-color: pink;
				width: 30px;
				height: 30px;
				line-height: 30px;
				overflow: hidden;
			}
			
			#in4 {
				border: 1px black;
				position: absolute;
				right: 140px;
				bottom: 20px;
				background-color: pink;
				width: 30px;
				height: 30px;
				line-height: 30px;
				overflow: hidden;
			}
			
			#img1 {
				width: 800px;
				height: 300px;
			}
		</style>
	</head>

	<body>
		<div id="div1">
			<img src="" id="img1" />
			<div id="in1" οnmοusemοve="changeImg4()">4</div>
			<div id="in2" οnmοusemοve="changeImg3()">3</div>
			<div id="in3" οnmοusemοve="changeImg2()">2</div>
			<div id="in4" οnmοusemοve="changeImg1()">1</div>
		</div>
	</body>
	<script>
		window.onload = imgStart()
		window.onload = xunhuan()

		function changeImg4() {
			setColor();
			var img = document.getElementById("img1")
			img.src = "img/101.jpg";
			var div4 = document.getElementById("in1")
			div4.style.backgroundColor = "red"
		}

		function changeImg3() {
			setColor();
			var img = document.getElementById("img1")
			img.src = "img/102.jpg";
			var div3 = document.getElementById("in2")
			div3.style.backgroundColor = "red"
		}

		function changeImg2() {
			setColor();
			var img = document.getElementById("img1")
			img.src = "img/103.jpg";
			var div2 = document.getElementById("in3")
			div2.style.backgroundColor = "red"
		}

		function changeImg1() {
			setColor();
			var img = document.getElementById("img1")
			img.src = "img/104.jpg";
			var div1 = document.getElementById("in4")
			div1.style.backgroundColor = "red"
		}

		function setColor() {
			var div1 = document.getElementById("in1")
			var div2 = document.getElementById("in2")
			var div3 = document.getElementById("in3")
			var div4 = document.getElementById("in4")
			div1.style.backgroundColor = "pink"
			div2.style.backgroundColor = "pink"
			div3.style.backgroundColor = "pink"
			div4.style.backgroundColor = "pink"
		}

		function imgStart() {
			setTimeout("changeImg1()", 0)
			setTimeout("changeImg2()", 2000)
			setTimeout("changeImg3()", 4000)
			setTimeout("changeImg4()", 6000)
		}

		function xunhuan() {
			setInterval("imgStart()", 8000)
		}
	</script>

</html>

wwwwwwwl

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Js实现图片轮播，以及鼠标移动选择指定图片

body { text-align: center; } #div1 { width: 800px; height: 300px; background-color: red; margin: 50px auto; position: relative; } #in1 { border: 1px bla
复制链接

扫一扫