사용자의 자동 슬라이드 탭 멈춤 호버

내 탭이 자동으로 슬라이드이고 마우스를 올려 놓으면 자동으로 슬라이드가 실행되고 자동으로 실행됩니다. 사용자가 마우스를 가리 키면 사용자가 자동으로 슬라이드 탭을 멈출 수 있습니다. 내 HTML과 CSS,이 JS 코드는 다음과 같습니다 HTML 코드사용자의 자동 슬라이드 탭 멈춤 호버

<ul id='tabs'> 
<li class='on'>tab 1</li> 
<li>tab 2</li> 
<li>tab 3</li> 
<li>tab 4</li> 
<li>tab 5</li>

CSS 코드

#tabs { list-style: none; margin: 0; padding: 0; } 
#tabs li { float: left; background: #ddd; padding: 6px; } 
#tabs li.on { background: #f90; color: #fff; }

JS (jQuery를) 코드

$(function() { 

//cache a reference to the tabs 
var tabs = $('#tabs li'); 

//on click to tab, turn it on, and turn previously-on tab off 
tabs.click(function() { $(this).addClass('on').siblings('.on').removeClass('on'); }); 

//auto-rotate every 5 seconds 
setInterval(function() { 

     //get currently-on tab 
    var onTab = tabs.filter('.on'); 

     //click either next tab, if exists, else first one 
    var nextTab = onTab.index() < tabs.length-1 ? onTab.next() :  tabs.first(); 
    nextTab.click(); 
}, 5000); 
    });

호브는에 위해 clearInterval을 사용할 수 있습니다

내 코드?

출처

2017-01-01 stackUser

가 몇 순간 [편집] 당신의 질문을 할 수 away' 때 다시 시작이 코드는? 나는 그것을 두 번 읽었으며 솔직히 당신이 해결하려고하는 문제를 모른다. 예를 들어, "* Puss *"는 무엇입니까? 질문을 일시적으로 닫고 친구 나 동료에게 영어에 대한 이해를 높이고 질문을 검토하여 모국어로 설명하고 번역에 대한 피드백을 얻을 수 있다면 도움이 될 수 있습니다. 영어를 모국어로 사용하는 사람이 아니기 때문에 질문을 끝내지 않아도됩니다. 질문하는 내용을 이해할 수 없으면 질문이 종료 될 수 있습니다. –

@David Thomas puss onmousever 내 코드가 멈추지 않고 자동으로 슬라이드 onmosever 또는 사용자가 움직입니다. – stackUser

탭 중 어느 호버에 자동 슬라이드를 일시 중지하고 마우스 이동

//cache a reference to the tabs 
var tabContainer = $('#tabs'); 
var tabs = $('#tabs li'); 

//on click to tab, turn it on, and turn previously-on tab off 
tabs.click(function() { 
    $(this).addClass('on').siblings('.on').removeClass('on'); 
}); 

//auto-rotate every 5 seconds 
var slideInterval; 

function initiateSlideInterval() { 
    slideInterval = setInterval(function() { 

     //get currently-on tab 
     var onTab = tabs.filter('.on'); 

     //click either next tab, if exists, else first one 
     var nextTab = onTab.index() < tabs.length - 1 ? onTab.next() : tabs.first(); 
     nextTab.click(); 
    }, 5000); 

} 
initiateSlideInterval(); 

tabContainer.mouseover(function() { 
    clearInterval(slideInterval) 
}); 
tabContainer.mouseout(function() { 
    initiateSlideInterval(); 
});`

출처

2017-01-01 15:30:00 nmathews

사용자의 자동 슬라이드 탭 멈춤 호버

답변

관련 문제