javascript如何实现图片切换的动画效果（代码）

来源：动视网责编：小采时间：2020-11-27 19:32:00

javascript如何实现图片切换的动画效果（代码）

javascript如何实现图片切换的动画效果（代码）:本篇文章给大家带来的内容是关于javascript如何实现图片切换的动画效果（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。首先效果图，大体这样的，点击左边的按钮，切换图片。看上去挺简单，但是还是有几个难点的，所以就把这个案例

推荐度：

点击下载本文 文档为doc格式

导读javascript如何实现图片切换的动画效果（代码）:本篇文章给大家带来的内容是关于javascript如何实现图片切换的动画效果（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。首先效果图，大体这样的，点击左边的按钮，切换图片。看上去挺简单，但是还是有几个难点的，所以就把这个案例

本篇文章给大家带来的内容是关于javascript如何实现图片切换的动画效果（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

首先效果图，大体这样的，点击左边的按钮，切换图片。

看上去挺简单，但是还是有几个难点的，所以就把这个案例挑出来好好的分析一下。

第一步：布局

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>图片切换器</title>
	</head>
	<style type="text/css">
	*{
	margin: 0;
	padding: 0;
	}
	body{
	background-color: RGB(123,113,104);
	}
	#pic{
	width: 300px;
	height: 400px;
	position: relative;
	margin: 50px auto;
	}
	#pic img{
	width: 300px;
	height: 400px;
	}
	#pic span,#pic p{
	position: absolute;
	width: 300px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background-color: rgba(61,50,48,0.5);
	}
	#pic span{
	top: 0px;
	}
	#pic p{
	bottom: 0px;
	}
	#pic ul{
	position: absolute;
	top:0px;
	left: 320px;
	}
	#pic li{
	list-style: none;
	width: 40px;
	height: 40px;
	background-color: #333;
	margin-bottom:10px ;
	}
	#pic li.active{
	background-color: #F2F2F2;
	}
	
	</style>
	<body>
	<p id="pic">
	<img src="img/1.jpeg"/>
	<span>- / -</span>
	<p>图片描述正在加载中...</p>
	<ul>
	<li class="active"></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	
	</ul>
	</p>
	</body>
</html>

第二步：数据与初始化

1）找到数据

2）对页面进行初始化

	<script type="text/javascript">
	window.onload = function(){
	var op = document.getElementById("pic");
	var oImg = op.getElementsByTagName('img')[0];
	var oSpan = op.getElementsByTagName('span')[0];
	var oP = op.getElementsByTagName('p')[0];
	var oUl = op.getElementsByTagName('ul')[0];
	
	var arrSrc = ['img/1.jpeg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg'];
	var arrText = ['图片描述：第一张','图片描述：第二张','图片描述：第三张','图片描述：第四张','图片描述：第五张'];
	
	//一般有数组就需要一个值
	var num = 0;
	
	//初始化
	oSpan.innerHTML = num+1 +" / "+ arrSrc.length;
	oImg.src = arrSrc[num];
	oP.innerHTML = arrText[num];
	for(var i=0;i<arrSrc.length;i++){
	oUl.innerHTML += '<li></li>';
	}
	
	}
	</script>

第三步：对图片进行切换，到目前切换图片和显示文字的功能就实现了，但是旁边ul的效果还没实现

var oLi = oUl.getElementsByTagName('li');

//切换图片
	for(var i=0;i<arrSrc.length;i++){
	//自定义属性，一一对应
	oLi[i].index = i;
	oLi[i].onclick = function(){
	var id = this.index;
	//通过自定义的属性设置对应的信息
	oImg.src = arrSrc[id];
	oP.innerHTML = arrText[id];
	oSpan.innerHTML = id+1 +" / "+ arrSrc.length;
	}
	}

第四步：实现 li 的class样式的添加。

思路一：

将 li 的样式全部清空，点击哪个再给哪个添加。

var oldLi = 0;

//初始化
oLi[oldLi].className = 'active';

//在点击事件中
//循环将class清空
	for(var j=0;j<arrSrc.length;j++){
	oLi[j].className = "";	
	}
	oLi[id].className = "active";

思路二：

清空上个，当前添加

定义一个变量，oldLi存储点击的上一个值

默认是0

当我们点击了下一个的时候，将为0的那个（默认的）清除掉。

并记录下当前点击的 li 的 index 自定义属性 oldLi = this.index;

再把当前的 li 设置上class属性

oLi[oldLi].className = '';
	oldLi = id;
	this.className = 'active';

完成了；

下面贴一下完整的代码和截图

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>图片切换器</title>
 </head>
 <style type="text/css">
 *{
 margin: 0;
 padding: 0;
 }
 body{
 background-color: RGB(123,113,104);
 }
 #pic{
 width: 300px;
 height: 400px;
 position: relative;
 margin: 50px auto;
 }
 #pic img{
 width: 300px;
 height: 400px;
 border-radius:10px;
 }
 #pic span,#pic p{
 position: absolute;
 width: 300px;
 height: 30px;
 line-height: 30px;
 text-align: center;
 background-color: rgba(61,50,48,0.5);
 }
 #pic span{
 top: 0px;
 border-radius:10px 10px 0 0;
 }
 #pic p{
 bottom: 0px;
 border-radius: 0 0 10px 10px;
 }
 #pic ul{
 position: absolute;
 top:0px;
 left: 320px;
 }
 #pic li{
 list-style: none;
 width: 40px;
 height: 40px;
 background-color: #333;
 margin-bottom:10px ;
 border-radius: 10px;
 }
 #pic li.active{
 background-color: #F2F2F2;
 }
 </style>
 <script type="text/javascript">
 window.onload = function(){
 var oDiv = document.getElementById("pic");
 var oImg = oDiv.getElementsByTagName('img')[0];
 var oSpan = oDiv.getElementsByTagName('span')[0];
 var oP = oDiv.getElementsByTagName('p')[0];
 var oUl = oDiv.getElementsByTagName('ul')[0];
 var oLi = oUl.getElementsByTagName('li');
 
 var arrSrc = ['img/1.jpeg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg'];
 var arrText = ['图片描述：第一张','图片描述：第二张','图片描述：第三张','图片描述：第四张','图片描述：第五张'];
 
 //一般有数组就需要一个值
 var num = 0;
 var oldLi = 0;
 
 //初始化
 oSpan.innerHTML = num+1 +" / "+ arrSrc.length;
 oImg.src = arrSrc[num];
 oP.innerHTML = arrText[num];
 for(var i=0;i<arrSrc.length;i++){
 oUl.innerHTML += '<li></li>';
 }
 oLi[oldLi].className = 'active';
 
 
 //切换图片
 for(var i=0;i<arrSrc.length;i++){
 //自定义属性，一一对应
 oLi[i].index = i;
 oLi[i].onclick = function(){
 var id = this.index;
 //通过自定义的属性设置对应的信息
 oImg.src = arrSrc[id];
 oP.innerHTML = arrText[id];
 oSpan.innerHTML = id+1 +" / "+ arrSrc.length;
 
 oLi[oldLi].className = '';
 oldLi = id;
 this.className = 'active';
 }
 }
 
 }
 </script>
 <body>
 <div id="pic">
 <img src="img/1.jpeg"/>
 <span>- / -</span>
 <p>图片描述正在加载中...</p>
 <ul>
 <!--<li class="active"></li>-->
 </ul>
 </div>
 </body>
</html>

javascript如何实现图片切换的动画效果（代码）

推荐度：

点击下载本文 文档为doc格式

标签：设置图片切换

热门焦点

javascript如何实现图片切换的动画效果（代码）

javascript如何实现图片切换的动画效果（代码）

javascript如何实现图片切换的动画效果（代码）

最新推荐

猜你喜欢

热门推荐