本篇文章给大家带来的内容是关于javascript如何实现图片切换的动画效果（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
首先效果图，大体这样的，点击左边的按钮，切换图片。
看上去挺简单，但是还是有几个难点的，所以就把这个案例挑出来好好的分析一下。
第一步：布局
图片切换器
- / -
图片描述正在加载中...
第二步：数据与初始化
立即学习“Java免费学习笔记（深入）”；
1）找到数据
2）对页面进行初始化
第三步：对图片进行切换，到目前切换图片和显示文字的功能就实现了，但是旁边ul的效果还没实现
var oLi = oUl.getElementsByTagName('li');
//切换图片
for(var i=0;i第四步：实现 li 的class样式的添加。
思路一：
将 li 的样式全部清空，点击哪个再给哪个添加。
var oldLi = 0;
//初始化
oLi[oldLi].className = 'active';
//在点击事件中
//循环将class清空
for(var j=0;j思路二：
清空上个，当前添加
定义一个变量，oldLi存储点击的上一个值
默认是0
当我们点击了下一个的时候，将为0的那个（默认的）清除掉。
并记录下当前点击的 li 的 index 自定义属性 oldLi = this.index;
再把当前的 li 设置上class属性
oLi[oldLi].className = '';
oldLi = id;
this.className = 'active';
完成了；
下面贴一下完整的代码和截图
图片切换器
- / -
图片描述正在加载中...
相关推荐：
