마우스 오버시 슬라이드 쇼를 일시 중지하려면 어떻게해야합니까?

죄송합니다. 자주 묻는 질문은 있지만 어디서나 문제를 해결하는 방법을 찾을 수 없었습니다. 슬라이드 쇼가 어떻게 작동하는지 전혀 모릅니다.마우스 오버시 슬라이드 쇼를 일시 중지하려면 어떻게해야합니까?

마우스 오버시 슬라이드 쇼를 일시 중지하고 mouseleave를 계속하고 싶습니다.

$(function() { 
    $('#carousel').carouFredSel({ 
     width: 800, 
     items: 4, 
     scroll: 1, 
     auto: { 
      duration: 1250, 
      timeoutDuration: 2500  
     }, 
     prev: '#prev', 
     next: '#next', 
     pagination: '#pager', 
    }); 
});`

그리고 블록의 HTML 코드 : 여기

아래의 코드들에

<!DOCTYPE html> 
<html> 
    <head> 
     <!-- 
      This carousel example is created with jQuery and the carouFredSel-plugin. 
      http://jquery.com 
      http://caroufredsel.dev7studios.com 
     --> 
     <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /> 
     <meta name="description" value="This beautifull carousel centeres 3 images inside a wrapper with rounded corners. Note that this will not work in Chrome, due to it not being able to overflow content wrapped in rounded corners." /> 
     <meta name="keywords" value="carousel, rounded, corners, jquery, example, pagination" /> 
     <title>Carousel with 3 images centered in rounded corners</title> 
     <script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script> 
     <script src="jquery.carouFredSel-6.1.0-packed.js" type="text/javascript"></script> 
     <script type="text/javascript" src="try.js"></script> 
     <style type="text/css"> 
      html, body { 
       height: 100%; 
       padding: 0; 
       margin: 0; 
      } 
      body { 
       background-color: #f0f0f0; 
       min-height: 700px; 
      } 
      body * { 
       font-family: Arial, Geneva, SunSans-Regular, sans-serif; 
       font-size: 14px; 
       color: #333; 
       line-height: 22px; 
      } 
      #wrapper { 
       background-color: #fff; 
       border: 1px solid #ccc; 
       border-radius: 100px; 
       width: 800px; 
       height: 127px; 
       padding: 10px; 
       margin: -75px 0 0 -410px; 
       position: absolute; 
       left: 50%; 
       top: 50%; 
      } 
      .caroufredsel_wrapper { 
       border-radius: 90px; 
      } 
      #carousel img { 
       width: 201px; 
       height: 127px; 
       margin: 0 5px; 
       float: left; 
      } 
      #prev, #next { 
       background: transparent url(img/carousel_control.png) no-repeat 0 0; 
       text-indent: -999px; 
       display: block; 
       overflow: hidden; 
       width: 15px; 
       height: 21px; 
       position: absolute; 
       top: 65px; 
      } 
      #prev { 
       background-position: 0 0; 
       left: 30px; 
      } 
      #prev:hover { 
       left: 29px; 
      }    
      #next { 
       background-position: -18px 0; 
       right: 30px; 
      } 
      #next:hover { 
       right: 29px; 
      }     
      #pager { 
       text-align: center; 
       margin: 0 auto; 
       padding-top: 20px; 
      } 
      #pager a { 
       background: transparent url(img/carousel_control.png) no-repeat -2px -32px; 
       text-decoration: none; 
       text-indent: -999px; 
       display: inline-block; 
       overflow: hidden; 
       width: 8px; 
       height: 8px; 
       margin: 0 5px 0 0; 
      } 
      #pager a.selected { 
       background: transparent url(img/carousel_control.png) no-repeat -12px -32px; 
       text-decoration: underline;     
      } 
     </style> 
    </head> 
    <body> 
     <div id="wrapper"> 
      <div id="carousel"> 
       <img src="img/up1.jpg" /> 
       <img src="img/up2.jpg" /> 
       <img src="img/up3.jpg" /> 
       <img src="img/up1.jpg" /> 
       <img src="img/up4.jpg" /> 
       <img src="img/up5.jpg" /> 
       <img src="img/up6.jpg" /> 
      </div> 
      <a id="prev" href="#"></a> 
      <a id="next" href="#"></a> 
      <div id="pager"></div> 
     </div> 
    </body> 
</html>

그리고 다른 두 JS 파일입니다 당신이보고 할 수 있습니다 연결합니다.

jquery file second jquery file

당신은 바닥 글 섹션에 webmasteroutlet.com에서 현재 버전을 확인할 수 있습니다. 마우스 오버시 일시 중지되지 않습니다.

출처

2013-05-07 Justin

마우스 오버시 사용 해봤습니까 ??

여기

$("#carousel").mouseover(function() { 
    $("#carousel").trigger('pause' ,true); 
    });

출처

2013-05-07 19:06:02

덕분에 작동하지만 방법과 장소에 [곳이 코드를 모르겠어요, 나는이 슬라이드 쇼의 구조를 전혀 이해하지 못한다. – Justin

내 대답이 업데이트되었습니다. –

내가 사람이 내가 스크롤 요소를 변경하여 사용 wnats 경우 무슨 짓을하고 잘

scroll: { 
        items: 1, 
        duration: 1250, 
        timeoutDuration: 2500, 
        easing: 'swing', 
        pauseOnHover: 'immediate' 
       },

출처

2013-05-07 23:52:26 Justin

왜 -1입니까? 그것은 작동합니다! –

pauseOnHover : true가 작동하지 않았습니다. 이것으로 해결했습니다! – skirato

마우스 오버시 슬라이드 쇼를 일시 중지하려면 어떻게해야합니까?

답변

관련 문제