轮番图之自动切换

最新推荐文章于 2020-12-12 16:26:02 发布

置顶我就是咸鱼

最新推荐文章于 2020-12-12 16:26:02 发布

阅读量264

点赞数

分类专栏： js 文章标签： html js css

本文链接：https://blog.csdn.net/weixin_44808327/article/details/109775759

版权

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自动切换</title>
	<style type="text/css">
		.show{
			width: 400px;
			height: 400px;
			overflow: hidden;
		}
		.wp{
			width: 99999999999999999999999px;
			height: 400px;
			text-align: center;
			line-height: 400px;
			font-size: 3em; 
			overflow: hidden;
			position: relative;
			left: 0;
			transition:all 0.3s; 
		}
		.wp div{
			width: 400px;
			height: 400px;
			text-align: center;
			float: left;
			line-height: 400px;
			transition:all 1s;
		}
		.wp div:nth-child(1){
			background: red;
		}
		.wp div:nth-child(2){
			background: green;
		}
		.wp div:nth-child(3){
			background: yellow;
		}
		.wp div:nth-child(4){
			background: blue;
		}
		.btn{
			width: 400px;
			height: 50px;
			text-align: center;
			font-size: 1.5em;
			line-height: 50px;
		}
		.btn span{
			width: 100px;
			height: 50px;
			float: left;
			text-align: center;
			font-size: 1.5em;
		}
		.btn span:nth-child(1){
			background: red;
		}
		.btn span:nth-child(2){
			background: green;
		}
		.btn span:nth-child(3){
			background: yellow;
		}
		.btn span:nth-child(4){
			background: blue;
		}
	</style>
</head>
<body>
	<div class="show">
		<div class="wp" id="wp">
			<div id="box1">1</div>
			<div id="box2">2</div>
			<div id="box3">3</div>
			<div id="box4">4</div>
		</div>
	</div>
	<div class="btn" id="btn">
			<span id="btn1">1</span>
			<span id="btn2">2</span>
			<span id="btn3">3</span>
			<span id="btn4">4</span>
		</div>
</body>
<script type="text/javascript">
	var _wp = document.getElementById('wp');
	var _btn = document.getElementById('btn').getElementsByTagName('span');
	var m = 0;
	setInterval(function(){
		m++;
		if(m>=_btn.length){ //4个
			m = 0;
		}
		_wp.style.left = -400*m + "px";
	},1500)
</script>
</html>

我就是咸鱼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
轮番图之自动切换

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>自动切换</title> <style type="text/css"> .show{ width: 400px; height: 400px; overflow: hidden; } .wp{ width: 999999999999999999
复制链接

扫一扫

专栏目录