从零开始学HTML&&CSS&&JavaScript——JavaScript之Dom实例动画轮播

最新推荐文章于 2022-10-21 15:57:57 发布

学号Java

最新推荐文章于 2022-10-21 15:57:57 发布

阅读量374

点赞数

分类专栏：前端基础

本文链接：https://blog.csdn.net/qq_42147171/article/details/104852715

版权

前端基础专栏收录该内容

28 篇文章 0 订阅

订阅专栏

动画轮播

要求
效果图
==代码==

要求

1.鼠标移入图像区域时出现上一张和下一张的按钮，移除时消失
2.可以随时点击上一张或者下一张
3.点击下方的动画标识时，出现对应的图片

效果图

1.鼠标为移入时：

鼠标移入时：

代码

div的大小根据图片的大小设置，主要通过opacity属性和zIndex实现轮播
opacity属性：代表透明度,0为全透明,1是完全不透明
zIndex属性:决定了图片在z轴上的顺序，也就是哪一张图片在最上方，值越大，在上方

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#contain{
				margin: 50px auto;
				width:721px;
				height: 447px;
			}
			#picture{
				position: absolute;
			}
			#picture img{
				position: absolute;
			}
			#button{
				position: absolute;
				top: 400px;
				left: 500px;
			}
			ul{
				clear: both;
				width: 150px;
				height: 17px;
			}
			li{
				display: inline-block;
				width: 17px;
				height: 17px;
				list-style: none;
				float: left;
				padding: 10px;
			}
			li img{
				width: 17px;
				height: 17px;
				border-radius: 50%;
			}
			#leftMove,
			#rightMove {
				display: inline-block;
				width: 40px;
				height: 40px;
			}
			
			#leftMove {
				position: absolute;
				margin-left: 60px;
				margin-top: 200px;
				background-image: url(nextAndPre.png);
				background-position-x: -15px;
				background-position-y: 105px;
				opacity: 0;
			}
			
			#rightMove {
				position: absolute;
				margin-top: 200px;
				margin-left: 580px;
				background-image: url(nextAndPre.png);
				background-position-x: -70px;
				background-position-y: 105px;
				opacity: 0;
			}
			#leftMove:hover,
			#leftMove:active {
				background-image: url(nextAndPre.png);
				background-position-x: -15px;
				background-position-y: 152px;
			}
			
			#rightMove:hover,
			#rightMove:active {
				background-image: url(nextAndPre.png);
				background-position-x: -70px;
				background-position-y: 152px
			}
			
		</style>
		<script type="text/javascript">
			window.onload=function(){
				 var au=document.getElementById("picture");
				 var lmove=document.getElementById("leftMove");
				var rmove=document.getElementById("rightMove");
				au.onmouseover=function(){
					lmove.style.opacity=3;
					rmove.style.opacity=3;
					lmove.style.zIndex=3;
					rmove.style.zIndex=3;
				}
				
				au.onmouseout=function(){
					lmove.style.opacity=0;
					rmove.style.opacity=0;
					lmove.style.zIndex=0;
					rmove.style.zIndex=0;
				}
				var i=0;
				var t;
				var p=0;
				var aLiimg=document.getElementById("ulo").getElementsByTagName("img");
				var img=document.getElementById("pic").getElementsByTagName("img");
					setInterval(function(){	
							if(i==0){
								aLiimg[aLiimg.length-1].src="p5.png";
								img[img.length-1].style.opacity=0;
								img[img.length-1].style.zIndex=1;
							}else{
								aLiimg[i-1].src="p5.png";
								img[i-1].style.opacity=0;
								img[i-1].style.zIndex=1;
							}
						aLiimg[i].src="p6.png";
						img[i].style.opacity=1;
						img[i].style.zIndex=2;
						i=i+1;
						if(i==img.length){
							i=0;
						}
				},1500)
			
					lmove.onclick=function(){
						for (var k=0;k<aLiimg.length;k++) {
							aLiimg[k].src="p5.png";
							img[k].style.opacity=0;
							img[k].style.zIndex=1;
						}
						if(i==0){
							i==img.length-2;
						}else
							i=i-2;
							aLiimg[i].src="p6.png";
							img[i].style.opacity=1;
							img[i].style.zIndex=2;
					}
					rmove.onclick=function(){
						for (var k=0;k<aLiimg.length;k++) {
							aLiimg[k].src="p5.png";
							img[k].style.opacity=0;
							img[k].style.zIndex=1;
						}
							aLiimg[i].src="p6.png";
							img[i].style.opacity=1;
							img[i].style.zIndex=2;
					}
						for (var k=0;k<aLiimg.length;k++) {
							aLiimg[k].index=k;
							aLiimg[k].onclick=function(k){
								for (var j=0;j<aLiimg.length;j++) {
									aLiimg[j].src="p5.png";
									img[j].style.opacity=0;
									img[j].style.zIndex=1;	
								}
							aLiimg[this.index].src="p6.png";
							img[this.index].style.opacity=1;
							img[this.index].style.zIndex=2;
							i=this.index;
							}
						}

			}
		</script>
	</head>
	<body>
		<div id="contain">
			<div id="picture">
				<div id="button">
					<ul id="ulo">
						<li><img src="p6.png" style="opacity:1;z-index: 3;"/></li>
						<li><img src="p5.png" style="opacity:1;z-index: 3;"/></li>
						<li><img src="p5.png" style="opacity:1;z-index: 3;"/></li>
						<li><img src="p5.png" style="opacity:1;z-index: 3;"/></li>
					</ul>
				</div>
				<a id="leftMove" ></a>
				<a id="rightMove"></a>
				<div id="pic">
				<img src="p1.png" style="opacity:1;z-index: 2;"/>
				<img src="p2.png" style="opacity:0;z-index: 1;"/>
				<img src="p3.png" style="opacity:0;z-index: 1;"/>
				<img src="p4.png" style="opacity:0;z-index: 1;"/>
				</div>	
			</div>
		</div>
	</body>
</html>