Javascript教程_Javascript仿flash焦点图片效果_Javascript教程(2)_H5之家

JS技术

Javascript教程_Javascript仿flash焦点图片效果_Javascript教程(2)

字号+ 作者：H5之家来源：H5之家 2015-09-27 13:05 我要评论( )

div id=fade_focus div class=loadingLoading...br /img src= width=100 height=100 //div ul liimg src= width=443 height=209 alt=展示图片1 //li liimg src= width=443 height=209 alt=展示图片2 //li liimg src

<div id="fade_focus">
<div class="loading">Loading...<br /><img src="" width="100" height="100" /></div>
<ul>
   <li><img src="" width="443" height="209" alt="展示图片1" /></li>
   <li><img src="" width="443" height="209" alt="展示图片2" /></li>
   <li><img src="" width="443" height="209" alt="展示图片3" /></li>
   <li><img src="" width="443" height="209" alt="展示图片4" /></li>
</ul>
</div>

使用的时候给焦点图片的div定一个id，然后在js里把var source="fade_focus"对应改一下，当然不定义id也可以，只要能够获取到对象就行。最后把图片以ul列表方式放到div里，运行代码就可以查看效果了。