HTML+JS轮播图

呀灯灯

已于 2023-10-30 23:01:03 修改

阅读量27

点赞数

文章标签： javascript html 前端

于 2023-10-30 23:00:56 首次发布

本文链接：https://blog.csdn.net/weixin_44283098/article/details/134130229

版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
	<style>
		#tplh{
			width: 700px;
			height: 350px;
			background-color: pink;
			position:relative;/*做用是让文本对其图片左下角（相对定位）*/
		}
/*图片*/
		#tplh ul{
			margin:0; 
			padding:0; 
			list-style-type:none; 
		}
		#pic li{
			display: none;
		}
/*文本*/
		#text{
			position:absolute; 
			left:15px; 
			bottom:10px;
		}
		#text li{
			list-style-type: none;
			color:white;
		}
/*数字*/
		#num{
			position:absolute; 
			right:15px; 
			bottom:10px;
		}
		#num li{
			list-style-type: none;
			float:left;
			width:25px;
			height:25px;
			height:25px;
/*			文本居中但是上下没有居中这是要设置行高*/
			text-align:center;
			line-height:25px;
			background-color:#EEE; /*设置一个偏灰色的背景颜色*/
			margin:5px;
		}
	</style>


	<script>
	var index = 1;
	var picLi,textLi,numLi;
	window.onload = function(){
		var pic = document.getElementById("pic");
		var text = document.getElementById("text");
		var num = document.getElementById("num");
		picLi = pic.getElementsByTagName("li");
		textLi = text.getElementsByTagName("li");
		numLi = num.getElementsByTagName("li");
		window.setInterval("rotate()",2000);
	};

	
	function rotate(){
		var i;
		for(var i = 0;i < 6;i++){
			if(i == index){
				picLi[i].style.display="block";
				textLi[i].style.display="block";
				numLi[i].style.backgroundColor="#F00";
			}else{
				picLi[i].style.display="none";
				textLi[i].style.display="none";
				numLi[i].style.backgroundColor="#FFF";
			}
		}
		index = (index + 1) % 6;
	}

	</script>



</head>

<body>
<div id="tplh">
	<ul id="pic">
		 <li style="display:block;"><img src="img/01.jpg" width="700" height="350" /></li>
    	<li><img src="img/02.jpg" width="700" height="350" /></li>
    	<li><img src="img/03.jpg" width="700" height="350" /></li>
    	<li><img src="img/04.jpg" width="700" height="350" /></li>
    	<li><img src="img/05.jpg" width="700" height="350" /></li>
    	<li><img src="img/06.jpg" width="700" height="350" /></li>
	</ul>
	
	<ul id="text">
		<li style="display:block;">餐饮专业学生作品</li>
    	<li>我校篮球队参加比赛</li>
    	<li>学生与服装设计师合影</li>
    	<li>创无止境，新有未来</li>
    	<li>模特后台合影</li>
    	<li>激情唱响</li>
	</ul>
	
	<ul id="num">
		<li style="background-color:#F00;">1</li>
    	<li>2</li>
    	<li>3</li>
    	<li>4</li>
    	<li>5</li>
    	<li>6</li>
	</ul>
</div>
</body>
</html>