网页图片特效:鼠标悬停暂停播放鼠标移开继续播放

admin

1. <div class="banner">
   
2.                          <ul class="IMG_list">
   
3.                                   <li><a target="_blank"><img src="images/1.jpg" alt="帆布鞋"></a><div class="titDiv"><p class="opacity">帆布鞋</p></div></li>
   
4.                                   <li><a target="_blank"><img src="images/2.jpg" alt="针织衫"></a><div class="titDiv"><p class="opacity">针织衫</p></div></li>
   
5.                                   <li><a target="_blank"><img src="images/3.jpg" alt="户外"></a><div class="titDiv"><p class="opacity">户外</p></div></li>
   
6.                                   <li><a target="_blank"><img src="images/4.jpg" alt="外套"></a><div class="titDiv"><p class="opacity">外套</p></div></li>
   
7.                                   <li><a target="_blank"><img src="images/5.jpg" alt="衬衫"></a><div class="titDiv"><p class="opacity">衬衫</p></div> </li>
   
8.                          </ul>
   
9.                 <p class="play_count">
   
10.                                         <span class="on_count">1</span>
    
11.                                         <span>2</span>
    
12.                                         <span>3</span>
    
13.                                         <span>4</span>
    
14.                                         <span>5</span>
    
15.                         </p>
    
16.             
    
17. </div>
    
18. JS部分：
    
19. var  timer=null
    
20. function showAuto(){
    
21.         var count=$("#focus_n li").length;
    
22.     n = n >= (count - 1) ? 0 : n + 1;   
    
23.     $("#focus_n li").eq(n).trigger('mouseover');   
    
24. }
    
25. var t = n = count = 0;
    
26. $(function(){   
    
27.     $("#focus_m li:not(:first-child)").hide();   
    
28.     $("#focus_n li").mouseover(function(){
    
29.                 $(this).addClass('active').siblings().removeClass('active');
    
30.                 count = $(this).parents().find('#focus_m li').length;
    
31.         var i=$(this).parent().find('li').index(this);
    
32.                  n = i;
    
33.                  if (i >= count) return;
    
34.                  $(this).parents().find('#focus_m li').stop(false,true).filter(":visible").fadeOut().parent().children().eq(i).fadeIn();   
    
35.     });  
    
36.         
    
37.          window.timer = setInterval("showAuto()", 5000);
    
38.          
    
39.          /*$(".banner").click(function(){
    
40.                  clearInterval(timer)},
    
41.                  function(){timer = setInterval("showAuto()", 5000);
    
42.          });*/  //这个是错的，因为鼠标点击之后，5秒之后并不能实现继续滚动
    
43.          
    
44.      $('.banner').mouseover(function(){
    
45.                  clearTimeout(timer);
    
46.                  window.setTimeout(function(){timer = setInterval("showAuto()", 5000)});
    
47.          })
    
48.          
    
49.           /*$(".banner").mouseover(function(){
    
50.            clearInterval(timer);
    
51.       });
    
52.         $(".banner").mouseout(function(){
    
53.            timer = setInterval("showAuto()", 2000);
    
54.       }); */ //这个是也错的，因为鼠标点击之后，5秒之后只能滚动一次
    
55.          
    
56.          
    
57. })

复制代码