轮播图

最新推荐文章于 2021-09-27 19:01:02 发布

xiaobai_dreamWeaver

最新推荐文章于 2021-09-27 19:01:02 发布

阅读量528

点赞数

分类专栏：前端交流学习文章标签： CSS 轮播图 javascript

本文链接：https://blog.csdn.net/xiaobai_dreamWeaver/article/details/78151216

版权

前端交流学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

最近看了自己以前写的轮播图，发现有重排的问题。用js重写了轮播图的简单实现方法：

<!DOCTYPE html>
<html>
<head>
	<title>轮播图</title>
	<meta charset="utf-8">
<style type="text/css">
	#showImg{
		width: 70%;
		height:400px;
		margin: 0 auto;
		position: relative;
	}
	.image{
		width: 90%;
		height:400px;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 0;
		opacity: 0;
	}
	.active{
		z-index: 1;
		opacity: 1;
		transition: opacity 2s ease-in-out;
	}
	@keyframes opacity{
		20%{opacity:0.2;}
		60%{opacity:0.4;}
		100%{opacity:0.6;}
	}
	#showSlide{
		height:20px;
		/*background: #AAA;*/
		position: absolute;
		left: 35%;
		top:90%;
		z-index: 100;
		opacity: 10;
	}
	.liSlide{
		display: inline-block;
		width:16px;
		height:16px;
		margin-left: 3px;
		list-style-type: none;
		border-radius: 8px;
		background-color: #AAA;
	}
</style>
</head>
<body>
	<div id="showImg">
		<div>
			<img class="image active" src="./css图片/mukewang.jpg">
			<img class="image active" src="./css图片/mukewang.jpg">
			<img class="image" src="./css图片/SICLOGO.png">
			<img class="image" src="./css图片/Internet.jpg">
		</div>
		<ul id="showSlide">
		</ul>
	</div>
<!--<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>-->
<script type="text/javascript">
	var showImg=document.getElementById("showImg");
	var imgs=showImg.getElementsByTagName('img');
	var showSlide=document.getElementById('showSlide');
	for (var i = 0; i < imgs.length; i++) {
		var dot=document.createElement('span');
		dot.className="liSlide";
		showSlide.appendChild(dot);
	}
	var i=-1;
	var dots=showSlide.getElementsByTagName('span');
	dots[0].style.backgroundColor='#fff';
	for (let j = 0; j < dots.length; j++) {
		dots[j].οnclick=function(){
			i=j;
			slide(i);
		}
	}
		setInterval(function(){
			if(i<imgs.length-1){
				i=i+1;
				slide(i);
			}else{
				i=-1;
			}
		},10000);
	function slide(i){
		for(let j=0;j<imgs.length;j++){
			if(j==i){
				imgs[j].classList.add("active");
				dots[j].style.backgroundColor='#fff';
			}else{
				imgs[j].classList.remove("active");
				dots[j].style.backgroundColor='#AAA';
			}
		}
	}
</script>
</body>
</html>

xiaobai_dreamWeaver

关注

0
点赞
踩
0

收藏

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

最近看了自己以前写的轮播图，发现有重排的问题。用js重写了轮播图的简单实现方法：轮播图 #showImg{ width: 70%; height:400px; margin: 0 auto; position: relative; } .image{ width: 90%; height:400px; position: absolute; le
复制链接

扫一扫