结合DOM树实现轮播图_轮播图未显示的项dom树存在吗-CSDN博客

本文链接：https://blog.csdn.net/TISRNW/article/details/102595601

在这里插入图片描述

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>lunbotu</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
				
			}
			html,body{
				height: 100%;
				width: 100%;
			}
			ul{
				height: 100px;
				width: 100px;
				display: flex;
				/*background-color: rosybrown;*/
				
			}
			.item {
				list-style: none;
				height: 100%;
				width: 100%;
				background-color: royalblue;
				
			}
		</style>
	</head>

	<body>
		<ul>
			<li class="item" id="dd">0</li>
			<li class="item" id="dd">1</li>
			<li class="item" id="dd">2</li>
		</ul>
		<script type="text/javascript">
			var item = document.getElementsByClassName('item')
			var dd = document.getElementById('dd')
			var lis = document.getElementsByTagName('li')
			var index = 0;
			var clear = function() {
				for(var i = 0; i < item.length; i++) {
					item[i].style.color = 'black'
//					lis[i].style.backgroundColor = 'gold'
				} //在变色之前将所有的还原成黑色

			}
			var goNext = function() {
				if(index == 2) {
					index = 0
				} else {
					index++
				}
				//          item[all].style.color = 'black'
				clear()
				item[index].style.color = 'red'
//				lis[index].style.backgroundColor = 'da222'+'index'

			}
			var goRre = function() {
				if(index == 0) {
					index = 2
				} else {
					index--
				}
				//			console.log(index)
				clear()
				item[index].style.color = 'red'
			}
		</script>
	</body>

</html>

还有一种方法用自定义一个标签来回改变页面的样式

var clear = function() {
				for(var i = 0; i < item.length; i++) {
					item[i].className = 'item'
				}

item[index].className = ' item show'

让显示的多出一个属性，在这个属性上写上样式，让不显示的保持原样即可。