结合DOM树实现轮播图

最新推荐文章于 2023-12-23 00:22:28 发布

雕琢时光纸戆

最新推荐文章于 2023-12-23 00:22:28 发布

阅读量138

点赞数

分类专栏： html

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

版权

html 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

在这里插入图片描述
操控行间标签属性来改变状态

<!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;
				
			}
			.item.show{
				color: red;
			}
		</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].className = 'item'
//					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].className = ' item show'
//				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].className = ' item show'
//				item[index].style.color = 'red'
			}
		</script>
	</body>

</html>

雕琢时光纸戆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
结合DOM树实现轮播图

操控行间标签属性来改变状态<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>lunbotu</title> <style type="text/css"> *{ margin: 0px; padding:...
复制链接

扫一扫

专栏目录