This article is a mirror article of machine translation, please click here to jump to the original article.

View: 12907|Reply: 0

[HTML/HTML5] Web image effects: Mouse hover to pause playback Mouse move away to continue playing

[Copy link]
Posted on 10/15/2014 5:02:48 PM | | |
  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. })
Copy code






Previous:Microsoft and Adobe have partnered to make Photoshop more touch-friendly
Next:window7 operating system 32-bit and 64-bit genuine download address
Disclaimer:
All software, programming materials or articles published by Code Farmer Network are only for learning and research purposes; The above content shall not be used for commercial or illegal purposes, otherwise, users shall bear all consequences. The information on this site comes from the Internet, and copyright disputes have nothing to do with this site. You must completely delete the above content from your computer within 24 hours of downloading. If you like the program, please support genuine software, purchase registration, and get better genuine services. If there is any infringement, please contact us by email.

Mail To:help@itsvse.com