本篇文章给大家带来的内容是关于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如何实现图片切换的动画效果（代码）的详细内容。