js中图片切换效果怎么实现

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

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

第一步：布局

图片切换器

*{

margin: 0;

padding: 0;

}

body{

#pic{

position: relative;

#pic img{

#pic span,#pic p{

position: absolute;

text-align: center;

#pic span{

top: 0px;

#pic p{

bottom: 0px;

#pic ul{

top:0px;

#pic li{

list-style: none;

margin-bottom:10px ;

#pic li.active{

- / -

图片描述正在加载中...

第二步：数据与初始化

①.）找到数据

window.onload = function(){

var op = document.getElementById("pic");

//一般有数组就需要一个值

var num = 0;

//初始化

oSpan.innerHTML = num+1 +" / "+ arrSrc.length;

oImg.src = arrSrc[num];

oP.innerHTML = arrText[num];

for(var i=0;i

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

//自定义属性,一一对应

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样式的添加.

思路一：

var oldLi = 0;

//循环将class清空

for(var j=0;j

oLi[j].className = "";

oLi[id].className = "active";思路二：

清空上个,当前添加

默认是0

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

oldLi = id;

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

border-radius:10px;

border-radius:10px 10px 0 0;

border-radius: 0 0 10px 10px;

border-radius: 10px;

var oDiv = document.getElementById("pic");

javascript中导入导出的实现方式（附代码）

原生js旋转木马的效果图的动画效果（附代码）

以上就是土嘎嘎小编大虾米为大家整理的相关主题介绍,如果您觉得小编更新的文章只要能对粉丝们有用，就是我们最大的鼓励和动力,不要忘记讲本站分享给您身边的朋友哦！！