实现轮播图二

最新推荐文章于 2023-12-11 12:47:46 发布

雕琢时光纸戆

最新推荐文章于 2023-12-11 12:47:46 发布

阅读量170

点赞数

分类专栏： html

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

版权

html 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			ul{
				list-style: none;
			}
			.item{
				height: 200px;
				width: 200px;
				font-size: 20px;
				text-align: center;
				margin: auto auto;
				display: none;
				
			}
			.item.show{
				display:block ;
			}
			.item:nth-child(1){
				background-color: red;
			}
			.item:nth-child(2){
				background-color: rosybrown;
			}
			.item:nth-child(3){
				background-color: royalblue;
			}
			.item:nth-child(4){
				background-color:aquamarine ;
			}
			.item:nth-child(5){
				background-color:indigo ;
			}
		</style>
	</head>
	<body>
		<ul>
			<li class="item">0</li>
			<li class="item">1</li>
			<li class="item">2</li>
			<li class="item">3</li>
			<li class="item">4</li>
			
			
		</ul>
		<script type="text/javascript">
			var item = document.getElementsByClassName('item')
			var index = 0
			var clear = function(){
				for(i=0;i<item.length;i++){
					item[i].className = 'item'
				}
			}
			var goNext  = function(){
				if(index==item.length-1){
					index=0
				}else{
					index++
				}
				clear()
				item[index].className = 'item show'
			}
			var goPro = function(){
				if(index==0){
					index = 4
				}else{
					index --
				}
				clear()
				item[index].className = 'item show'
			}
//			var show = Element.attributes
		</script>
	</body>
</html>

使添加上的标签属性显示，平常的不显示

雕琢时光纸戆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现轮播图二

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> ul{ list-style: none; } .item{ height:...
复制链接

扫一扫