jquery延时载入动画焦点图- 有点类似视差动画

在这里我用了一个插件jquery.DB_tabMotionBanner.min.js。

参考下载：http://www.jqueryfuns.com/resource/1424

http://www.xwcms.net/js/jdt/76222.html

http://www.jb51.net/jiaoben/142671.html

首先引入js文件

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>   注意这里是1.8.3版本的，其他版本可能就不适用啦。
<script type="text/javascript" src="jquery.DB_tabMotionBanner.min.js"></script>

页面

<div class="DB_tab25">

      <ul class="DB_bgSet">//这是四个背景图
<li style="background:url('img/bg1.jpg') no-repeat 49% 0"></li>
<li style="background:url('img/bg2.jpg') no-repeat 49% 0"></li>
<li style="background:url('img/bg3.jpg') no-repeat 49% 0"></li>
<li style="background:url('img/bg4.jpg') no-repeat 49% 0"></li>
</ul>

<ul class="DB_imgSet">//这是每个背景上的文字或者图片的内容，最后会飘动上背景图上的
<li>
<a href="#"><img class="DB_1_1" src="img/move1.png" alt=""/></a>
<img class="DB_1_2" src="img/move2.png" alt=""/>
<img class="DB_1_3" src="img/move3.png" alt=""/></li>
<li>
<img class="DB_2_1" src="img/move1.png" alt=""/>
<img class="DB_2_2" src="img/move2.png" alt=""/>
<img class="DB_2_3" src="img/move3.png" alt=""/></li>
<li>
<img class="DB_3_1" src="img/move1.png" alt=""/>
<img class="DB_3_2" src="img/move2.png" alt=""/>
<img class="DB_3_3" src="img/move3.png" alt=""/></li>
<li>
<img class="DB_4_1" src="img/move1.png" alt=""/>
<img class="DB_4_2" src="img/move2.png" alt=""/>
<img class="DB_4_3" src="img/move2.png" alt=""/>
<img class="DB_4_4" src="img/move2.png" alt=""/>
<img class="DB_4_5" src="img/move3.png" alt=""/></li>
</ul>

<div class="DB_menuWrap">

         <ul class="DB_menuSet">//这里是四个图片的四个点点
<li><img src="img/btn_off.gif" alt=""/></li>
<li><img src="img/btn_off.gif" alt=""/></li>
<li><img src="img/btn_off.gif" alt=""/></li>
<li><img src="img/btn_off.gif" alt=""/></li>
</ul>

                //上下页的翻页效果

              <div class="DB_next"><img src="img/nextArrow.png" alt="NEXT"/></div>
<div class="DB_prev"><img src="img/prevArrow.png" alt="PREV"/></div>

</div>

</div>

好啦，重点的js内容来啦

<script type="text/javascript">
$('.DB_tab25').DB_tabMotionBanner({
key:'b28551',
autoRollingTime:10000,                            
bgSpeed:500,
motion:
{
//设置各个图片动画出现的效果
DB_1_1:{left:-50,opacity:0,speed:1000,delay:500},
DB_1_2:{left:-50,opacity:0,speed:1000,delay:1000},
DB_1_3:{left:100,opacity:0,speed:1000,delay:1500},


DB_2_1:{top:50,opacity:0,speed:1000,delay:500},
DB_2_2:{top:50,opacity:0,speed:1000,delay:1000},
DB_2_3:{left:100,opacity:0,speed:1000,delay:1500},


DB_3_1:{left:-50,opacity:0,speed:1000,delay:500},
DB_3_2:{top:50,opacity:0,speed:1000,delay:1000},
DB_3_3:{left:100,opacity:0,speed:1000,delay:1500},


DB_4_1:{left:-50,opacity:0,speed:1000,delay:500},
DB_4_2:{left:-50,opacity:0,speed:1000,delay:1000},
DB_4_3:{left:-50,opacity:0,speed:1000,delay:1500},
DB_4_4:{left:-50,opacity:0,speed:1000,delay:2000},
DB_4_5:{left:100,opacity:0,speed:1000,delay:3000},


end:null
}

})
</script>