JS学习日记--animation<2>

最新推荐文章于 2022-06-27 18:13:39 发布

风华正茂呀

最新推荐文章于 2022-06-27 18:13:39 发布

阅读量194

点赞数 1

分类专栏： JS学习日记文章标签： javascript js

本文链接：https://blog.csdn.net/weixin_42149770/article/details/104135869

版权

JS学习日记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

今天敲了一个图片的透明度轮播效果，依然没有新方法，理清逻辑关系即可

主要就是利用昨天封装好的函数，把当前图片透明度变为0，下一张变为100，然后重点在获取当前图片和下一张图片的值上，话不多说，上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>透明度轮播</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			.slider{
				width: 700px;
				height: 500px;
				border: 7px solid #FF0000;
				position: absolute;
			}
			.item{
				position: absolute;
				left: 0px;
				top: 0px;
				opacity: 0;
			}
			.item:first-of-type{
				opacity: 100;
			}
			img{
				width: 700px;
				height: 500px;
				display: block;
			}
			.prev{
				position: absolute;
				left:0px ;
				top: 210px;
			}
			.next{
				position: absolute;
				right: 0px;
				top: 210px;
			}
			button{
				width: 80px;
				height: 80px;
				opacity: 0.5;
				font-size: xx-large;
			}
			.pagination{
				position: relative;
				top: 450px;
				left: 250px;
				
			}
			.bullet{
				width: 30px;
				height: 30px;
				background-color: black;
				align-self: center;
				margin-left:5px ;
				float: left;
				border: 2px solid yellow;
				cursor: pointer;
				color: #FF0000;
				text-align: center;
			}
			.bullet.focus
			{
				background-color: aliceblue;
			}
		</style>
	
	<script src="../js/animation.js" type="text/javascript" charset="utf-8"></script>
	
		<script type="text/javascript">
			
			window.onload=function()
			{
				var prevIndex,nextIndex;
				var len;
				var id;
				init();
				
				
				
				function init()//初始化
				{
					
					prevIndex=nextIndex=0;
					len=document.getElementsByClassName("item").length;
					var btn_pre=document.getElementsByClassName("prev")[0];
					var btn_next=document.getElementsByClassName("next")[0];
					btn_pre.onclick=function()//上一张
					{
						
						sliderPrev();
					}
					btn_next.onclick=function()//下一张
					{
						silderNext();
					}
					//下面的小方块
					var bullet=document.getElementsByClassName("bullet");
					for (var i=0;i<bullet.length;i++) {
						bullet[i].index=i;//给每一个方块赋值
						bullet[i].onclick=function()
						{
							prevIndex=nextIndex;
							nextIndex=this.index;
							sliderTo(prevIndex,nextIndex);
						}
					}
				
				var slider=document.getElementsByClassName('slider')[0];
				slider.onmouseover=function()//移入停止轮播
				{
					stop();
				}
				slider.onmouseout=function()//移出继续
				{
					auto();
				}
				auto();
				}
				
				function sliderPrev()//上一张的函数
				{
					
					prevIndex=nextIndex;//更新一下prev也就是当前图片的值
					nextIndex--;
					
					if(nextIndex<0)//当前是第一张，就切到最后一张
					{
						nextIndex=len-1;
					}
					sliderTo(prevIndex,nextIndex);
					
				}
				
				function silderNext()//下一张的函数，具体同上面那个差不多
					{
					
					nextIndex++;
					if(nextIndex===len)
					{
						nextIndex=0;
					}
					sliderTo(prevIndex,nextIndex);
					prevIndex=nextIndex;
				}
				
				function sliderTo(prev,next)//跳转函数
				{
	
					var lis=document.getElementsByClassName("item");
					animate(lis[prev],{opacity:0});//上一篇中封装好的函数
					
					animate(lis[next],{opacity:100});
					var bullets=document.getElementsByClassName('bullet');
					bullets[prev].className='bullet';//小方块的焦点
					bullets[next].className='bullet focus';
				}
				
				function auto()//自动轮播
				{
					clearInterval(id);
					id=setInterval(function()
					{
						silderNext();
					},2000)
				}
				
				function stop()//停止自动轮播
				{
					clearInterval(id);
				}
			}
		</script>
	</head>
	<body>
		<div class="slider">
			<ul class="list">
				<li class="item "id="1"><img src="../img/img (1).jpg" alt=""></li>
				<li class="item"id="2"><img src="../img/img (2).jpg" alt=""></li>
				<li class="item"id="3"><img src="../img/img (3).jpg" alt=""></li>
				<li class="item"id="4"><img src="../img/img (4).jpg" alt=""></li>
			</ul>
			<button type="button" class="prev"><</button>
			<button type="button" class="next">></button>
			<ul class="pagination">
				<li class="bullet focus">1</li>
				<li class="bullet">2</li>
				<li class="bullet">3</li>
				<li class="bullet">4</li>
			</ul>
		</div>
	</body>
</html>