jquery轮换效果网上已经很多了,现在我也来发一个

代码很简单:

1 <div class="blockB" collection="Y" >
2  <h2><span>王牌栏目 Regular features</span></h2>
3  <div id="regular_features" class="pp">
4 <div class="tabs"> <a class="on" href="http://meinv.vs2010.com/topic/9/201107/show-id2265.html" target="_blank">世界最美</a><a href="http://meinv.vs2010.com/topic/8/201107/show-id2295.html" target="_blank">哇!好玩</a><a href="http://meinv.vs2010.com/topic/6/201107/show-id2254.html" target="_blank">穷游世界</a><a href="http://meinv.vs2010.com/topic/6/201106/show-id2211.html" target="_blank">周末驾到</a> </div>
5 <ul>
6 <li><a href="http://meinv.vs2010.com/topic/9/201107/show-id2265.html"target="_blank"><img src="http://meinv.vs2010.com/DownLoad/2011-7-5/sc50a2e249f11402c9ad62fc95cc6ec9c.jpg" alt="少女傲人双峰自拍" border="0"></a> <span><a href="http://meinv.vs2010.com/topic/9/201107/show-id2265.html" target="_blank">少女傲人双峰自拍</a></span> </li>
7 <li><a href="http://meinv.vs2010.com/topic/8/201107/show-id2295.html" target="_blank"><img alt="日本酥胸美女杉原杏" src="http://meinv.vs2010.com/DownLoad/2011-7-8/s1b77b22af4c24b1dbae673a0088c2757.jpg"></a> <span><a href="http://meinv.vs2010.com/topic/8/201107/show-id2295.html" target="_blank">日本酥胸美女杉原杏</a></span> </li>
8 <li><a href="http://meinv.vs2010.com/topic/6/201107/show-id2254.html" target="_blank"><img src="http://meinv.vs2010.com/DownLoad/2011-7-4/s612d1ce2d8b34795bcdc5094a086bdb5.jpg" alt="性感美女黑色内衣" border="0"></a> <span><a href="http://meinv.vs2010.com/topic/6/201107/show-id2254.html" target="_blank">性感美女黑色内衣</a></span> </li>
9 <li><a href="http://meinv.vs2010.com/topic/6/201106/show-id2211.html" target="_blank"><img src="http://meinv.vs2010.com/DownLoad/2011-6-30/s6af1526e7e58439b8dcd39537b61b792.jpg" alt="绝美性感黑丝美眉" border="0"></a> <span><a href="http://meinv.vs2010.com/topic/6/201106/show-id2211.html" target="_blank">绝美性感黑丝美眉</a></span> </li>
10 </ul>
11  </div>
12 <script type="text/javascript">
13 jQuery(function (j) {
14
15 var r = j('#regular_features'),
16 btns = r.find('> div.tabs > a'),
17 el_ani = r.find('> ul'),
18 el_pages = el_ani.find('> li'),
19 pages = el_pages.length,
20 p = 0,
21 pw = 219;
22 btns.each(function (idx, btn) {
23 btn = j(btn);
24 btn.mouseenter(function (ev) {
25 if (idx != p) {
26 j(btns[p]).removeClass('on');
27 btn.addClass('on');
28 p = idx;
29 el_ani.stop().animate({ top: -pw * idx }, 300);
30 }
31 return false;
32 });
33 }).eq(1).mouseenter();
34 });
35 </script>
36 </div>

最后再看看效果:http://demo.vs2010.com/adimg/

作者: 孩他爸 发表于 2011-07-09 12:45 原文链接

推荐.NET配套的通用数据层ORM框架:CYQ.Data 通用数据层框架