컨트롤과 자동 스크롤이있는 jquery 슬라이더

기본적으로 나는 교육 목적으로 무작위로 jQuery를 만들려고 노력하고 있습니다. 여기에 아주 간단한 슬라이더가 있습니다. 내가 자동으로 그리고 컨트롤 (작은/다음 슬라이더로 스크롤하는 작은 화살표)와 함께 작동 싶어요. 지금 당장 가지고있는 유일한 문제는 화살표를 누를 때마다 매 5 초마다 자동으로 슬라이드를 전환하는 기능이이 5000ms를 여전히 계산하므로 다음 슬라이드가 더 빠르게 표시되는 것입니다. 내가 원하는 것은 그 화살표를 타이머로 재설정하여 화살표를 누르는 것입니다. -> 다음 슬라이드가 나타납니다 -> 5 초 후에 다시 슬라이드가 전환됩니다. 유감스럽게도 설명을 드려 죄송합니다. 여기 컨트롤과 자동 스크롤이있는 jquery 슬라이더

는 jsfiddle입니다 : http://jsfiddle.net/cA9aW/

여기에 코드

HTML

<body> 
<div id="wrapper"> 
    <header> 
     <h1>Simplest Sliding Image Slider</h1> 

    </header> 
    <div id="content"> 
     <div id="slider_container"> 
      <div id="slider"> 
       <div class="slides" id="slide1"> 
        <img src="http://s2.postimg.org/5uxqi0mgl/cats1.jpg" alt="" /> 
       </div> 
       <div class="slides" id="slide2"> 
        <img src="http://s2.postimg.org/66f6us2wl/cats2.jpg" alt="" /> 
       </div> 
       <div class="slides" id="slide3"> 
        <img src="http://s2.postimg.org/ai3sjs9th/cats3.jpg" alt="" /> 
       </div> 
      </div> 
     </div> 
    </div> 
    <footer></footer> 
    </div> 
</body>

에게 JS

jQuery(document).ready(function($) { 

// start slider function 
startSlider(); 

// set width and step variables and add active class to first slider 
var slideWidth = $('.slides').width(); 
$('#slide1').addClass('slides active'); 

// actual function 
function startSlider() { 

looper = setInterval(function() { 
    // remove and add class active 
    $('.active').removeClass('active').next().addClass('active'); 

    // animation expression 
    $('.active').animate({'left': '-=' + (slideWidth) + 'px'}, 500); 
    $('.active').siblings().animate({'left': '-=' + (slideWidth) + 'px'}, 500); 

    // return to first slide after the last one 
    if($('.active').length == 0) { 
    $('#slide1').addClass('active'); 
    $('.slides').animate({'left': 0}, 500); 

    } 
}, 5000); // interval 


// adding controls 
$('.slides').append("<div class='controls'><a class='control_left' href='#'></a><a class='control_right' href='#'></a></div>"); 

// remove unnecessary controlls on first and last slides 
$('.slides:nth-child(1) a.control_left').remove(); 
$(".slides:nth-child(" + $('.slides').length + ") a.control_right").remove(); 

// add functionality to controls 
$('.control_left').on('click', function() { 
    $('.active').removeClass('active').prev().addClass('active'); 
    $('.active').animate({'left': '+=' + (slideWidth) + 'px'}, 500); 
    $('.active').siblings().animate({'left': '+=' + (slideWidth) + 'px'}, 500); 
}); 

$('.control_right').on('click', function() { 
    $('.active').removeClass('active').next().addClass('active'); 
    $('.active').animate({'left': '-=' + (slideWidth) + 'px'}, 500); 
    $('.active').siblings().animate({'left': '-=' + (slideWidth) + 'px'}, 500); 
}); 



} 

});

들으 사전에 많은입니다

출처

2013-09-28 Serge Eremeev

당신은 모든 버튼 클릭에 그것을 다시 원하고 처음부터 다시 다시 맞죠? – PSL

그건 슬라이더를 만드는 데 딱 맞는 (또는 가장 단순한) 방법이 아니며, 모든 곳에 버튼을 두는 대신 2 개의 버튼을 사용하는 것입니다. –

저는 이것이 완벽하지는 않지만 아주 단순한 슬라이더를 먼저 만들고 모든 것을 풀고 싶다는 것을 알고 있습니다. 내가 만나는 문제들. 이제 나는 그것을 연마하고, 더 잘 만들고, 조금 더 진보 된 것을 시도하려고 노력할 것입니다. –

버튼 클릭 간격을 초기화하기 위해 필요한 작업을 다시 클릭하고 간격을 다시 시작하십시오.

function resetInterval(){ //add this method which wil reset the timer 
     window.clearInterval(looper); //clear current interval 
     looper = setInterval(autoSlide, 5000); //start auto slide again. 
} 
function autoSlide(){ //move this to a function from being anonymous 
     // remove and add class active 
     $('.active').removeClass('active').next().addClass('active'); 
     // animation expression 
     $('.active').animate({ 
      'left': '-=' + (slideWidth) + 'px' 
     }, 500); 
     $('.active').siblings().animate({ 
      'left': '-=' + (slideWidth) + 'px' 
     }, 500); 

     // return to first slide after the last one 
     if ($('.active').length === 0) { 
      $('#slide1').addClass('active'); 
      $('.slides').animate({ 
       'left': 0 
      }, 500); 
     } 
}

및

$('.control_left').on('click', function() { 
     resetInterval(); //reset it 
.... 

$('.control_right').on('click', function() { 
     resetInterval(); //reset it 
....

Demo

출처

2013-09-28 15:46:18 PSL

답장을 보내 주셔서 감사합니다. 정말 도움이되었습니다. –

@ SergeEremeev 환영합니다. – PSL

LIVE DEMO

HTML :

<div id="gallery"> 
    <div id="slider"> 
    <div><img src="http://s2.postimg.org/5uxqi0mgl/cats1.jpg" alt=""></div> 
    <div><img src="http://s2.postimg.org/66f6us2wl/cats2.jpg" alt=""></div> 
    <div><img src="http://s2.postimg.org/ai3sjs9th/cats3.jpg" alt=""></div> 
    </div> 
    <span id="prev"></span> 
    <span id="next"></span> 
</div>

CSS :

#gallery{ 
    position:relative; 
    margin: 0 auto; 
    overflow:hidden; 
    width:500px; 
    height:278px; 
} 
#slider{ 
    position:absolute; 
    left:0; 
    height:278px; 
} 
#slider > div { 
    position:relative; 
    float:left; 
    width:500px; 
    height:278px; 
} 
#slider > div img{ 
    width:100%; 
} 
/* buttons */ 
#gallery > span{ 
    cursor:pointer; 
    position:absolute; 
    width:50px; 
    height:100%; 
    background:rgba(255,255,255,0.5); 
    opacity:0.5; 
} 
#next{ 
    right:0px; 
} 
#gallery > span:hover{ 
    opacity:1; 
}

JQ :

jQuery(function($) { 

    var $gal = $('#gallery'), 
     $sli = $('#slider'), 
     $box = $('div',$sli), 
     W = $gal.width(), // 500 
     N = $box.length, // 3 
     C = 0,   // a counter 
     intv; 

    $sli.width(W*N); 


    $('#prev, #next').click(function(){ 
     C = (this.id=='next' ? ++C : --C) <0 ? N-1 : C%N; 
     $sli.stop().animate({left: -C*W },800); 
    }); 

    function auto(){ 
     intv = setInterval(function(){ 
     $('#next').click(); 
     }, 3000); 
    } 
    auto(); // start 

    $('#gallery').hover(function(e){ 
     return e.type=='mouseenter'?clearInterval(intv):auto(); 
    }); 

});

출처

2013-09-28 16:22:46

답변 해 주셔서 감사합니다. 매우 다르지만 같은 문제에 대한 다른 접근 방식을 보는 것이 좋습니다. 솔루션에는 한 가지 문제가 있습니다. 첫 번째 슬라이드에있는 동안 왼쪽 스팬을 누르면 모든 것이 손상됩니다. –

@SergeEremeev 맞아, 작은 오류가 있었어. :) –

컨트롤과 자동 스크롤이있는 jquery 슬라이더

답변

관련 문제