特效描述:jquery 图文列表 淡进淡出 滚动轮播代码。jquery图文列表淡进淡出滚动轮播代码
代码结构
1. 引入JS
<script type="text/javascript" src="../Spy_Effect/js/jquery-1.4.2.min.js"></script>
2. HTML代码
<div class="demo"> <h2>jquery仿新浪微博图片文字列表间隙滚动淡进淡出滚动</h2> <div id="sidebar"> <ul class="spy"> <li> <a href="http://www.51qianduan.com/" title="View round"><img width="70" height="70" src="../Spy_Effect/images/1.png" title="" /></a> <h5><a href="http://www.51qianduan.com/" title="View round">round</a></h5> <p class="info">Nov 29th 2008 by neue</p> </li> <li> <a href="http://www.51qianduan.com/" title="View reflet"><img width="70" height="70" src="../Spy_Effect/images/2.png" title="" /></a> <h5><a href="http://www.51qianduan.com/" title="View reflet">reflet</a></h5> <p class="info">Nov 29th 2008 by neue</p> </li> <li> <a href="http://www.51qianduan.com/" title="View Kate Moross Little Big Planet"><img width="70" height="70" src="../Spy_Effect/images/3.png" title="" /></a> <h5><a href="http://www.51qianduan.com/" title="View Kate Moross Little Big Planet">Kate Moross Little Big Planet</a></h5> <p class="info">Nov 29th 2008 by neue</p> </li> <li> <a href="http://www.51qianduan.com/" title="View Untitled"><img width="70" height="70" src="../Spy_Effect/images/4.png" title="" /></a> <h5><a href="http://www.51qianduan.com/" title="View Untitled">Untitled</a></h5> <p class="info">Nov 29th 2008 by mike1052</p> </li> <li> <a href="http://www.51qianduan.com/" title="View My Tutorial's Library"><img width="70" height="70" src="../Spy_Effect/images/5.png" title="" /></a> <h5><a href="http://www.51qianduan.com/" title="View My Tutorial's Library">My Tutorial's Library</a></h5> <p class="info">Nov 29th 2008 by FrancescoOnAir</p> </li> <li> <a href="http://www.51qianduan.com/" title="View Sandy — your free personal email assistant - Log in"><img width="70" height="70" src="../Spy_Effect/images/6.png" title="" /></a> <h5><a href="http://www.51qianduan.com/" title="View Sandy — your free personal email assistant - Log in">Sandy — your free</a></h5> <p class="info">Nov 29th 2008 by John Doe</p> </li> <li> <a href="http://www.51qianduan.com/" title="View Sandy — your free personal email assistant - Log in"><img width="70" height="70" src="../Spy_Effect/images/7.png" title="" /></a> <h5><a href="http://www.51qianduan.com/" title="View Sandy — your free personal email assistant - Log in">Sandy — your free</a></h5> <p class="info">Nov 29th 2008 by John Doe</p> </li> <li> <a href="http://www.51qianduan.com/" title="View Sandy — your free personal email assistant"><img width="70" height="70" src="../Spy_Effect/images/8.png" title="" /></a> <h5><a href="http://www.51qianduan.com/" title="View Sandy — your free personal email assistant">Sandy — your free</a></h5> <p class="info">Nov 29th 2008 by John Doe</p> </li> <li> <a href="http://www.51qianduan.com/" title="View Values of n Blog"><img width="70" height="70" src="../Spy_Effect/images/9.png" title="" /></a> <h5><a href="http://www.51qianduan.com/" title="View Values of n Blog">Values of n Blog</a></h5> <p class="info">Nov 29th 2008 by John Doe</p> </li> </ul> </div> </div>