怎么用js做动图，几张图片轮流切换的 急需，可以扣扣微信交流

JavaScript0106

怎么用js做动图，几张图片轮流切换的 急需，可以扣扣微信交流,第1张

一般使用jquery插件，还要看你的切换效果而定。以左右滑动切换为例

1.将所有图片横向排列，放在绝对定位的div内，然后在外面加一个div，设置overflow为hidden

2.用jquery的animate函数，定时将left参数修改

3.轮一圈后，将第一张图加到后面，以后每切换一张就将最前面的加到尾部。

用js来修改图片路径实现轮播是不太可取的一种办法，通常的做法是：

把需要轮播的图片全部罗列出来，用js控制轮流显示第几张图片，

EX：

html代码：

<div id="lunbo">

<div id="img1" class="img"><img src="**"></div>

<div id="img2" class="img"><img src="**"></div>

<div id="img3" class="img"><img src="**"></div>

</div>

css代码：

#lunbo{width:100%height:300pxposition:relativezoom:1overflow:hidden}

#lunbo div{width:100%height:100%position:absoluteleft:0top:0display:none}

#lunbo div:first-child{display:block}

img{width:100%height:100%border:0display:block}

js代码：

<script type="text/javascript">

var t=0

setInterval(function(){

t++

if(t>2)t=0

document.querySelector(".img").style.display="none"

document.querySelector("#img"+t.toString()).style.display="block"

},5000)

</script>

其实很简单,方法也很多,不知道你想用什么方法实现.

先介绍两种比较简单的

注:图片大小之类的自己用CSS控制

页面加入<img id="imgId"/>标签

然后引入javascript:

核心:

//给定图片路径数组

var imgs = ['1.jpg','2.jpg',...]

function switchoverCore(){

var img = document.getElementById("imgId")

img.src = imgs.shift(0)

imgs.push(img.src)

//如果用下面的第一种方法,请删除下行注释,第二种不用下行代码

//setTimeout("switchoverCore()",1000)

}

第一种方法

运用setTimeout()

setTimeout("switchoverCore()",1000)//这里的1000是1秒轮换一次,单位为ms(毫秒)

第二种方法

运用setInterval()

setInterval("switchoverCore()",1000)//1000意义解释同上

自己整理下就可以了...