html5图片无限循环播放,jQuery多重图片无限循环动画特效

jwscrollloop是一款非常实用的jQuery多图片无限循环动画特效插件。该插件可以单独对某张图片进行动画控制，如控制运动速度，方向，起点和终点等，将各种图片动画元素组合起来就可以组成非常完美的动画场景。

使用方法

使用该图片动画插件需要引入jQuery和jwscrollloop.js文件。

HTML结构

你可以使用一个容器

来包裹一张需要执行动画效果的图片。

初始化插件

在页面DOM元素加载完毕之后，你可以通过scrollLoop()方法来初始化该插件。

$("#dc1").scrollLoop();

配置参数

下面是该图片循环动画插件的一些可用配置参数。

time：完成一次动画的时间，单位毫秒，默认值为5000。

offsetX：图片X方向的开始位置，单位像素，默认值1000。例如1000表示距离原始位置向右1000像素。

deltaX：图片X方向的结束位置，单位像素，默认值-1000。正值向右运动，负值向左运动。

offsetY：图片Y方向的开始位置，单位像素，默认值0。

deltaY：图片Y方向的结束位置，单位像素，默认值0。正值向上运动，负值向下运动。

position_type：对象的单位方式，默认值relative。可用值有：relative和absolute。两种方式在图片动画开始和结束的地方会有一些差异。

play_count：执行动画的次数，默认值-1。-1表示无限循环。

多图片动画

你可以使用这个插件非常容易的制作出多图片动画效果。例如下面的例子：这个例子有两张图片，一张是白云图片，一张是飞机图片，白云会从右向左飘过，飞机则从左下角向右上角飞行。

$(function(){

$("#dc1_02").scrollLoop({'time':10000});

$("#dp1").scrollLoop({'time':10000,'offsetX':-600,'deltaX':800,'offsetY':200,'deltaY':-300});

});