1 <div id="content" class="yowo_slide_wp">
2 <ul id="yowo_slide" class="yowo_slide">
3 <li><img src="http://images.cnblogs.com/cnblogs_com/zsk526/240728/o_%E5%8D%9A%E5%AE%A2%E5%9B%ADtitle.gif" width="910px" height="288px" alt="广告图片" /></li>
4 <li><img src="http://images.cnblogs.com/cnblogs_com/zsk526/240728/o_blogTitle-02.png" width="910px" height="288px" alt="广告图片" /></li>
5 <li><img src="http://images.cnblogs.com/cnblogs_com/zsk526/240728/o_%E5%8D%9A%E5%AE%A2%E5%9B%ADtitle.gif" width="910px" height="288px" alt="广告图片" /></li>
6 <li><img src="http://images.cnblogs.com/cnblogs_com/zsk526/240728/o_blogTitle-02.png" width="910px" height="288px" alt="广告图片" /></li>
7 <li><img src="http://images.cnblogs.com/cnblogs_com/zsk526/240728/o_%E5%8D%9A%E5%AE%A2%E5%9B%ADtitle.gif" width="910px" height="288px" alt="广告图片" /></li>
8 <li><img src="http://images.cnblogs.com/cnblogs_com/zsk526/240728/o_blogTitle-02.png" width="910px" height="288px" alt="广告图片" /></li>
9 </ul>
10 <span id="angle"></span>
11 <ul id="yowo_slide_botton" class="yowo_slide_botton">
12 <li><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/zsk526/240728/o_%E5%8D%9A%E5%AE%A2%E5%9B%ADtitle.gif" width="145px" height="50px" alt="广告图片" /></a></li>
13 <li><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/zsk526/240728/o_blogTitle-02.png" width="145px" height="50px" alt="广告图片" /></a></li>
14 <li><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/zsk526/240728/o_%E5%8D%9A%E5%AE%A2%E5%9B%ADtitle.gif" width="145px" height="50px" alt="广告图片" /></a></li>
15 <li><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/zsk526/240728/o_blogTitle-02.png" width="145px" height="50px" alt="广告图片" /></a></li>
16 <li><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/zsk526/240728/o_%E5%8D%9A%E5%AE%A2%E5%9B%ADtitle.gif" width="145px" height="50px" alt="广告图片" /></a></li>
17 <li><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/zsk526/240728/o_blogTitle-02.png" width="145px" height="50px" alt="广告图片" /></a></li>
18 </ul>
19 </div>
20
1 (function(){ //幻灯功能
2 var lis = $('#yowo_slide>li').filter(':not(:first)').hide().end();
3 lis[0].id = 'active';
4 var s_lis = $('#yowo_slide_botton>li').filter(':not(:first)').css('opacity',0.3).end();
5 s_lis[0].id = 's_active';
6
7 for(var i = 0; i < 6; i++){
8 (function(){
9 var j = i;
10 s_lis.eq(j).mouseover(function(){
11 if(this.id == 's_active'){return};
12
13 slide.index = j==5 ? 0 : j+1;
14
15 $('#angle').stop(true,true).animate({'left':72+j*152},{duration:500})
16
17 $('#active').stop(true,true).fadeOut('slow').get(0).id = "";
18 lis.eq(j).fadeIn(1000).get(0).id = "active";
19
20 $('#s_active').css('opacity',0.3).get(0).id = "";
21 this.id = 's_active';
22 $(this).css({'opacity':1});
23 })
24 })()
25 }
26 var slide = {index:1};
27 slide.interval = setInterval(function(){s_lis.eq(slide.index).mouseover()},6000);
28
29 $('#yowo_slide_botton').mousemove(function(){
30 clearInterval(slide.interval);
31 }).mouseout(function(){
32 slide.interval = setInterval(function(){s_lis.eq(slide.index).mouseover()},6000);
33 })
34 })()
