.stop on .mouseover或.hover

我無法弄清楚如何停止並恢復鼠標懸停或懸停事件上的幻燈片。我基本上想在.mouseover或.hover被觸發時停止所有的腳本。誰可以幫我這個事？.stop on .mouseover或.hover

編輯：代碼應該工作，如果你簡單地複製粘貼，它是所有外部託管

<!DOCTYPE html> 
<html> 

    <head> 
     <script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script> 
     <script src="http://static.tumblr.com/jvojroo/DIamwjvp3/jquery.caroufredsel-6.2.0-packed.js" type="text/javascript"></script> 
     <script type="text/javascript"> 

     $(function() { 



       $('#slider').carouFredSel({ 
        width: '100%', 
        align: false, 
        items: 4, 
        items: { 
         width: $('#wrapper').width() * 0.15, 
         height: 500, 
         visible: 1, 
         minimum: 1 
        }, 
        scroll: { 
         items: 1, 
         timeoutDuration: 1000, 
         onBefore: function(data) { 


          // find current and next slide 
          var currentSlide = $('.slide.active', this), 
           nextSlide = data.items.visible, 
           _width = $('#wrapper').width(); 

          // resize currentslide to small version 
          currentSlide.stop().animate({ 
           width: _width * 0.15 
          }); 
          currentSlide.removeClass('active'); 

          // hide current block 
          data.items.old.add(data.items.visible).find('.slide-block').stop().fadeOut(); 

          // animate clicked slide to large size 
          nextSlide.addClass('active'); 
          nextSlide.stop().animate({ 
           width: _width * 0.7 
          }); 

         }, 
         onAfter: function(data) { 
          // show active slide block 
          data.items.visible.last().find('.slide-block').stop().fadeIn(); 
         } 
        }, 
        onCreate: function(data) { 

         // clone images for better sliding and insert them dynamacly in slider 
         var newitems = $('.slide', this).clone(true), 
          _width = $('#wrapper').width(); 

         $(this).trigger('insertItem', [newitems, newitems.length, false]); 

         // show images 
         $('.slide', this).fadeIn(); 
         $('.slide:first-child', this).addClass('active'); 
         $('.slide', this).width(_width * 0.15); 

         // enlarge first slide 
         $('.slide:first-child', this).animate({ 
          width: _width * 0.7 
         }); 

         // show first title block and hide the rest 
         $(this).find('.slide-block').hide(); 
         $(this).find('.slide.active .slide-block').stop().fadeIn(); 
        } 
       }); 

       // Handle click events 
       $('#slider').children().click(function() { 
        $('#slider').trigger('slideTo', [this]); 
       }); 

       $('.slide:firstchild').mouseover(function() { 
        $('.slide:firstchild').stop(); 
       }); 

       $('#slider').children().mouseover(function() { 
        $('#slider').stop(); 
       }); 

       //$('#slider').children().mouseout(function() { 
       // $('#slider').trigger('slideTo', [this]); 
       //}); 

       // Enable code below if you want to support browser resizing 
       $(window).resize(function() { 

        var slider = $('#slider'), 
         _width = $('#wrapper').width(); 

        // show images 
        slider.find('.slide').width(_width * 0.15); 

        // enlarge first slide 
        slider.find('.slide.active').width(_width * 0.7); 

        // update item width config 
        slider.trigger('configuration', ['items.width', _width * 0.15]); 
       }); 

      }); 
     </script> 
     <style type="text/css"> 
      html, body { 
       height: 100%; 
       padding: 0; 
       margin: 0; 
      } 
      body { 
       background: #f9f9f3; 
      } 
      body * { 
       font-family: Arial, Geneva, SunSans-Regular, sans-serif; 
       font-size: 14px; 
       color: #222; 
       line-height: 20px; 
      } 
      #wrapper { 
       height: 100%; 
       width: 100%; 
       min-height: 650px; 
       min-width: 900px; 
       padding-top: 1px; 
      } 
      #slider { 
       margin: 100px 0 0 0; 
       height: 500px; 
       overflow: hidden; 
      } 
      #slider .slide { 
       position: relative; 
       display: none; 
       height: 500px; 
       float: left; 
       background-position: center right; 
       cursor: pointer; 
       border-left: 1px solid #fff; 
      } 
      #slider .slide:first-child { 
       border: none; 
      } 
      #slider .slide.active { 
       cursor: default; 
      } 
      #slider .slide-block { 
       position: absolute; 
       left: 40px; 
       bottom: 75px; 
       display: inline-block; 
       width: 435px; 
       background-color: #fff; 
       background-color: rgba(255, 255, 255, 0.8); 
       padding: 20px; 
       font-size: 14px; 
       color: #134B94; 
       border: 1px solid #fff; 
       overflow: hidden; 
       border-radius: 4px; 
      } 
      #slider .slide-block h4 { 
       font-size: 36px; 
       font-weight: bold; 
       margin: 0 0 10px 0; 
       line-height: 1; 
      } 
      #slider .slide-block p { 
       margin: 0; 
      } 
      #donate-spacer { 
       height: 0; 
      } 
      #donate { 
       border-top: 1px solid #999; 
       width: 750px; 
       padding: 50px 75px; 
       margin: 0 auto; 
       overflow: hidden; 
      } 
      #donate p, #donate form { 
       margin: 0; 
       float: left; 
      } 
      #donate p { 
       width: 650px; 
       color: #999; 
      } 
      #donate form { 
       width: 100px; 
      } 
     </style> 
    </head> 

    <body> 
     <div id="wrapper"> 
      <div id="slider"> 
       <div class="slide"> 
        <img src="http://farm4.staticflickr.com/3821/10956569263_92a647e267_o.png"> 
        <div class="slide-block"> 
          <h4>Ice Age</h4> 

         <p>Heading south to avoid a bad case of global frostbite, a group of migrating misfit creatures embark on a hilarious quest to reunite a human baby with his tribe.</p> 
        </div> 
       </div> 
       <div class="slide"> 
        <img src="http://farm8.staticflickr.com/7444/10956575693_94fd773731_o.png"> 
        <div class="slide-block"> 
          <h4>For The Birds</h4> 

         <p>For the Birds is an animated short film, produced by Pixar Animation Studios released in 2000. It is shown in a theatrical release of the 2001 Pixar feature film Monsters, Inc.</p> 
        </div> 
       </div> 
       <div class="slide"> 
        <img src="http://farm4.staticflickr.com/3789/10956504824_4845433ff6_o.png"> 
        <div class="slide-block"> 
          <h4>UP</h4> 

         <p>A comedy adventure in which 78-year-old Carl Fredricksen fulfills his dream of a great adventure when he ties thousands of balloons to his house and flies away to the wilds of South America.</p> 
        </div> 
       </div> 
       <div class="slide"> 
        <img src="http://farm6.staticflickr.com/5464/9449526762_ed5339251e_o.jpg"> 
        <div class="slide-block"> 
          <h4>Ice Age</h4> 

         <p>Heading south to avoid a bad case of global frostbite, a group of migrating misfit creatures embark on a hilarious quest to reunite a human baby with his tribe.</p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 

</html>

來源

2013-11-22 CameoCream

你能提供小提琴嗎？ http://jsfiddle.net/ –

小提琴？我是新對不起哈哈:) – CameoCream

只需複製粘貼你的代碼，這是所有和生成的鏈接放在這裏 –

您可以觸發一個名爲自定義事件上carouFredSel組件「停止」如果你想停止滑塊。

$('#slider').trigger("stop");

，並觸發一個名爲「玩」了額外的參數真正的自定義事件，以恢復滑塊

$("#slider").trigger("play",true);

例如：

<script> 
    $(function(){ 
     $("#slider").carouFredSel({ 
      items: 4 
     }); 

     $("#slider > div.slide").hover(
      function(){ 
       $("#slider").trigger("stop"); 
      }, 
      function(){ 
       $("#slider").trigger("play",true); 
      } 
     ); 
    }); 
</script>

希望這是對你有幫助。

來源

2013-11-22 06:01:11 Chickenrice

好吧謝謝，我會給它一個:) – CameoCream

謝謝！它像一個魅力一樣工作！你能解釋一下它的工作原理嗎？我想知道下次。我會投票，但我有1個聲望哈哈：D – CameoCream

啊，算了一下。歡呼所有的幫助。 – CameoCream

.stop on .mouseover或.hover

回答

相關問題