Bu makale makine çevirisi ayna makalesidir, orijinal makaleye geçmek için lütfen buraya tıklayın.

Görünüm: 12907|Yanıt: 0

[HTML/HTML5] Web görsel etkileri: Oynatmayı durdurmak için fareyi getir Oynatmaya devam etmek için fare uzaklaşır

[Bağlantıyı kopyala]
Yayınlandı 15.10.2014 17:02:48 | | |
  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. })
Kopya kodu






Önceki:Microsoft ve Adobe, Photoshop'u daha dokunmatik hale getirmek için iş birliği yaptı
Önümüzdeki:Windows7 işletim sistemi 32-bit ve 64-bit gerçek indirme adresi
Feragatname:
Code Farmer Network tarafından yayımlanan tüm yazılım, programlama materyalleri veya makaleler yalnızca öğrenme ve araştırma amaçları içindir; Yukarıdaki içerik ticari veya yasa dışı amaçlarla kullanılamaz, aksi takdirde kullanıcılar tüm sonuçları ödemelidir. Bu sitedeki bilgiler internetten alınmakta olup, telif hakkı anlaşmazlıklarının bu siteyle hiçbir ilgisi yoktur. Yukarıdaki içeriği indirmeden sonraki 24 saat içinde bilgisayarınızdan tamamen silmelisiniz. Programı beğendiyseniz, lütfen orijinal yazılımı destekleyin, kayıt satın alın ve daha iyi orijinal hizmetler alın. Herhangi bir ihlal olursa, lütfen bizimle e-posta yoluyla iletişime geçin.

Mail To:help@itsvse.com