javascript如何实现图片切换的动画效果（代码）
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript如何实现图片切换的动画效果（代码），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4878字，纯文字阅读大概需要7分钟。
内容图文
本篇文章给大家带来的内容是关于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中导入导出的实现方式（附代码）
原生js旋转木马的效果图的动画效果（附代码）
以上就是javascript如何实现图片切换的动画效果（代码）的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的javascript如何实现图片切换的动画效果（代码）全部内容，希望文章能够帮你解决javascript如何实现图片切换的动画效果（代码）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】