jQuery Content Slider 자동 스크롤

Question

brenelz.com/2009/03/31/build-a-content-slider-with-jquery/ tutorial의 코드를 사용했으며 기능적인 콘텐츠 슬라이더가 있습니다.

이제 콘텐츠를 자동으로 슬라이드하고 자바 스크립트 setInterval()을 사용하여 시도해 보았습니다. 나는 그것을 알아낼 수 없었다. 어떤 도움을 주시면 감사하겠습니다. setInterval을 전달

(function($) { 
    $.fn.ContentSlider = function(options) 
    { 
    var defaults = { 
     leftBtn : 'images/cs_leftImg.jpg', 
     rightBtn : 'images/cs_rightImg.jpg', 
     width : '900px', 
     height : '400px', 
     speed : 400, 
     easing : 'easeOutQuad', 
     textResize : false, 
     IE_h2 : '26px', 
     IE_p : '11px' 
    } 
    var defaultWidth = defaults.width; 
    var o = $.extend(defaults, options); 
    var w = parseInt(o.width); 
    var n = this.children('.cs_wrapper').children('.cs_slider').children('.cs_article').length; 
    var x = -1*w*n+w; // Minimum left value 
    var p = parseInt(o.width)/parseInt(defaultWidth); 
    var thisInstance = this.attr('id'); 
    var inuse = false; // Prevents colliding animations 

    function moveSlider(d, b) 
    { 
     var l = parseInt(b.siblings('.cs_wrapper').children('.cs_slider').css('left')); 
     if(isNaN(l)) { 
     var l = 0; 
     } 
     var m = (d=='left') ? l-w : l+w; 
     if(m<=0&&m>=x) { 
     b 
      .siblings('.cs_wrapper') 
      .children('.cs_slider') 
       .animate({ 'left':m+'px' }, o.speed, o.easing, function() { 
       inuse=false; 
       }); 

     if(b.attr('class')=='cs_leftBtn') { 
      var thisBtn = $('#'+thisInstance+' .cs_leftBtn'); 
      var otherBtn = $('#'+thisInstance+' .cs_rightBtn'); 
     } else { 
      var thisBtn = $('#'+thisInstance+' .cs_rightBtn'); 
      var otherBtn = $('#'+thisInstance+' .cs_leftBtn'); 
     } 
     if(m==0||m==x) { 
      thisBtn.animate({ 'opacity':'0' }, o.speed, o.easing, function() { thisBtn.hide(); }); 
     } 
     if(otherBtn.css('opacity')=='0') { 
      otherBtn.show().animate({ 'opacity':'1' }, { duration:o.speed, easing:o.easing }); 
     } 
     } 
    } 

    function vCenterBtns(b) 
    { 
     // Safari and IE don't seem to like the CSS used to vertically center 
     // the buttons, so we'll force it with this function 
     var mid = parseInt(o.height)/2; 
     b 
     .find('.cs_leftBtn img').css({ 'top':mid+'px', 'padding':0 }).end() 
     .find('.cs_rightBtn img').css({ 'top':mid+'px', 'padding':0 }); 
    } 

    return this.each(function() { 
     $(this) 
     // Set the width and height of the div to the defined size 
     .css({ 
      width:o.width, 
      height:o.height 
     }) 
     // Add the buttons to move left and right 
     .prepend('<a href="#" class="cs_leftBtn"><img src="'+o.leftBtn+'" /></a>') 
     .append('<a href="#" class="cs_rightBtn"><img src="'+o.rightBtn+'" /></a>') 
     // Dig down to the article div elements 
     .find('.cs_article') 
      // Set the width and height of the div to the defined size 
      .css({ 
      width:o.width, 
      height:o.height 
      }) 
      .end() 
     // Animate the entrance of the buttons 
     .find('.cs_leftBtn') 
      .css('opacity','0') 
      .hide() 
      .end() 
     .find('.cs_rightBtn') 
      .hide() 
      .animate({ 'width':'show' }); 

     // Resize the font to match the bounding box 
     if(o.textResize===true) { 
     var h2FontSize = $(this).find('h2').css('font-size'); 
     var pFontSize = $(this).find('p').css('font-size'); 
     $.each(jQuery.browser, function(i) { 
      if($.browser.msie) { 
      h2FontSize = o.IE_h2; 
      pFontSize = o.IE_p; 
      } 
     }); 
     $(this).find('h2').css({ 'font-size' : parseFloat(h2FontSize)*p+'px', 'margin-left' : '66%' }); 
     $(this).find('p').css({ 'font-size' : parseFloat(pFontSize)*p+'px', 'margin-left' : '66%' }); 
     $(this).find('.readmore').css({ 'font-size' : parseFloat(pFontSize)*p+'px', 'margin-left' : '66%' }); 
     } 

     // Store a copy of the button in a variable to pass to moveSlider() 
     var leftBtn = $(this).children('.cs_leftBtn'); 
     leftBtn.bind('click', function() { 
     if(inuse===false) { 
      inuse = true; 
      moveSlider('right', leftBtn); 
     } 
     return false; // Keep the link from firing 
     }); 

     // Store a copy of the button in a variable to pass to moveSlider() 
     var rightBtn = $(this).children('.cs_rightBtn'); 
     rightBtn.bind('click', function() { 
     if(inuse===false) { 
      inuse=true; 
      moveSlider('left', rightBtn); 
     } 
     return false; // Keep the link from firing 
     }); 

     vCenterBtns($(this)); // This is a CSS fix function. 
    }); 
    } 
})(jQuery) 

Answer 1

속도 값은 나중에 자동 슬라이드를 취소 할 경우

var timerid = setInterval(function() { 
    $('a.cs_leftBtn').trigger('click'); 
}, speed); 

에 콘텐츠 슬라이더를 설정해야합니다 timerId가 그 상황과 통화에서 볼 수 있도록 속도와 일치해야합니다

clearInterval(timerid); 

---

지금 너무있을 경우 사용하는 컨텐츠 슬라이더, 내가 해달라고 부탁하는 경우 확인하지 않고 이 콘텐츠 슬라이더에 대한 특별한 메튜 링이나 왜이 슬라이더가 할 수있는 모든 작업을 확실하게 수행 할 수있는 기성품의 jQuery 플러그인을 사용하지 않으려 고하며, 기본적으로 자동 회전 기능과 더 많은 기능을 지원합니다. 내가 가진

그냥 몇 가지 힌트

List of 13 jQuery Content-Sliders