Question

过去成功使用jquery-infinite-carousel但是对于我目前的项目，我需要它永远循环并且一次跳3个项目。它的工作原理示例一次跳跃1 here。

jQuery.fn.carousel = function(previous, next, options){
var sliderList = jQuery(this).children()[0];

if (sliderList) {
    var increment = jQuery(sliderList).children().outerWidth("true"),

    elmnts = jQuery(sliderList).children(),
    numElmts = elmnts.length,
    sizeFirstElmnt = increment,
    shownInViewport = Math.round(jQuery(this).width() / sizeFirstElmnt),
    firstElementOnViewPort = 1,
    isAnimating = false;

    //console.log("increment = " + increment);
    //console.log("numElmts = " + numElmts);
    //console.log("shownInViewport = " + shownInViewport);

    for (i = 0; i < shownInViewport; i++) {
        jQuery(sliderList).css('width',(numElmts+shownInViewport)*increment + increment + "px");
        jQuery(sliderList).append(jQuery(elmnts[i]).clone());
    }

    jQuery(previous).click(function(event){
        if (!isAnimating) {
            if (firstElementOnViewPort == 1) {
                jQuery(sliderList).css('left', "-" + numElmts * sizeFirstElmnt + "px");
                firstElementOnViewPort = numElmts;
                console.log("firstElementOnViewPort = " + firstElementOnViewPort);
            }
            else {
                firstElementOnViewPort--;
            }

            jQuery(sliderList).animate({
                left: "+=" + increment,
                y: 0,
                queue: true
            }, "swing", function(){isAnimating = false;});
            isAnimating = true;
        }

    });

    jQuery(next).click(function(event){
        if (!isAnimating) {
            if (firstElementOnViewPort > numElmts) {
                firstElementOnViewPort = 2;
                jQuery(sliderList).css('left', "0px");
            }
            else {
                firstElementOnViewPort++;
            }
            jQuery(sliderList).animate({
                left: "-=" + (increment),
                y: 0,
                queue: true
            }, "swing", function(){isAnimating = false;});
            isAnimating = true;
        }
    });
}

};

Answer 1

这将需要大量重新编码才能使插件以您希望的方式工作。你看过jCarousel了吗？特别是this example？

实际上，考虑更多......你可以尝试triggering点击一下。以下是我修改演示的方法：

HTML / CSS

<style type="text/css">
 #simplePrevious, #simpleNext { display: none; }
</style>

<div class="demo">
 <h2 class="hl">Basic example</h2>
 <div id="viewport">
  <ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
  </ul>
 </div>
 <a id="multi-prev">&lt;&lt;</a><a id="simplePrevious">Previous</a>
 <a id="simpleNext">Next</a><a id="multi-next">&gt;&gt;</a>
</div>

脚本

jQuery(document).ready(function(){
 jQuery('#viewport').carousel('#simplePrevious', '#simpleNext');

 var simulateClicks = 3;

 $('#multi-next').click(function(){
  var i=0, t = setInterval( function(){
   $('#simpleNext').trigger('click');
   i++;
   if ( i > simulateClicks - 1 ) { clearInterval(t); }
  }, 500 );
 });

 $('#multi-prev').click(function(){
  var i=0, t = setInterval( function(){
   $('#simplePrevious').trigger('click');
   i++;
   if ( i > simulateClicks - 1 ) { clearInterval(t); }
  }, 500 );
 });

});

jquery-infinite-carousel - 跳3项而不是1项

1 个答案: