0

我刚刚将我的 jQuery 更新到最后一个，突然我看到了损坏的 jCarousel。有人可以为我指出错误/改变的正确方向吗，因为我花了几个小时试图让它发挥作用，但仍然没有成功。

我的猜测是，较新的版本在后容器中添加了错误的填充。

Bellow 是我在 jQuery 1.7.2 上工作的代码

    jQuery(document).ready(function(){

    var carousel_container = jQuery('.carousel-container');

    function carousel_init(){
        carousel_container.each(function(){
            var carousel = jQuery(this);
            var carousel_holder = carousel.children('.carousel-item-holder');
            var carousel_item = carousel.find('.carousel-item');

            carousel_item.css('float', 'left');

            var child_size;
            if( carousel_item.filter(':first').hasClass('three') ){
                carousel_holder.attr('data-num', 4);
                child_size = carousel.parents('.row').width() / 4;
            }else if( carousel_item.filter(':first').hasClass('four') ){
                carousel_holder.attr('data-num', 3);
                child_size = carousel.parents('.row').width() / 3;
            }else if( carousel_item.filter(':first').hasClass('six') ){
                carousel_holder.attr('data-num', 2);
                child_size = carousel.parents('.row').width() / 2;
            }

            if( jQuery(window).width() <= '767' ){
                carousel_holder.attr('data-num', 1);
                child_size = carousel_item.width() + 15; //carousel.parents('.row').width();
            }

            child_size += 9;

            carousel_item.width( child_size );

            carousel_holder.attr('data-width', child_size);
            carousel_holder.attr('data-max', carousel_item.length);
            carousel_holder.width( carousel_item.length * child_size );

            var cur_index = parseInt(carousel_holder.attr('data-index'));
            carousel_holder.css({ 'margin-left': -(cur_index * child_size + 12.5) });
        });
    }

    // bind the navigation
    var carousel_nav = carousel_container.children('.carousel-navigation');
    carousel_nav.children('.carousel-prev').click(function(){
        var carousel_holder = jQuery(this).parent('.carousel-navigation').siblings('.carousel-item-holder');
        var cur_index = parseInt(carousel_holder.attr('data-index'));

        if( cur_index > 0 ){ cur_index--;  }

        carousel_holder.attr('data-index', cur_index);
        carousel_holder.animate({ 'margin-left': -(cur_index * parseInt(carousel_holder.attr('data-width')) + 12.5) });
    });
    carousel_nav.children('.carousel-next').click(function(){
        var carousel_holder = jQuery(this).parent('.carousel-navigation').siblings('.carousel-item-holder');
        var cur_index = parseInt(carousel_holder.attr('data-index'));

        if( cur_index + parseInt(carousel_holder.attr('data-num')) < parseInt(carousel_holder.attr('data-max')) ){
            cur_index++;
        }

        carousel_holder.attr('data-index', cur_index);
        carousel_holder.animate({ 'margin-left': -(cur_index * parseInt(carousel_holder.attr('data-width')) + 12.5) });
    });

    carousel_init();

    //Auto animate
    //var infiniteLoop = setInterval(function(){
    //  carousel_nav.children('.carousel-next').trigger('click');
    //}, 1000); 

    jQuery(window).resize(function(){
        carousel_init();
    });

});

和html代码

<div class="carousel-container">
  <div class="carousel-navigation">
    <a class="carousel-prev">
    </a>
    <a class="carousel-next">
    </a>
  </div>
  <div class="carousel-item-holder row" data-index="0">
    <div class="four column carousel-item">
      <a href="#">
        <img src="http://placehold.it/300x250" alt="">
      </a>

      <div class="post-container">
        <h2 class="post-title">
          Create a Flexible Folded Paper Effect Using CSS3 Features
        </h2>
        <div class="post-content">
          <p>
            Venenatis volutpat orci, ut sodales augue tempor nec. Integer tempus ullamcorper felis eget dipiscing. Maecenas orci justo, mollis at tempus ac, gravida non
          </p>
        </div>
      </div>

      <div class="post-meta">
        <span class="comments">
          <a href="#">
            24
          </a>
        </span>
        <span class="date">
          <a href="#">
            13 Jan 2013
          </a>
        </span>
      </div>
    </div>
    <div class="four column carousel-item">
      <a href="#">
        <img src="http://placehold.it/300x250" alt="">
      </a>

      <div class="post-container">
        <h2 class="post-title">
          Create a Flexible Folded Paper Effect Using CSS3 Features
        </h2>
        <div class="post-content">
          <p>
            Venenatis volutpat orci, ut sodales augue tempor nec. Integer tempus ullamcorper felis eget dipiscing. Maecenas orci justo, mollis at tempus ac, gravida non
          </p>
        </div>
      </div>

      <div class="post-meta">
        <span class="comments">
          <a href="#">
            24
          </a>
        </span>
        <span class="date">
          <a href="#">
            13 Jan 2013
          </a>
        </span>
      </div>
    </div>
4

2 回答 2

0

我建议根据您使用的 1.7.2 之后的版本更改检查您的代码。一个好的开始在这里：http: //jquery.com/upgrade-guide/1.9/

于 2013-11-13T03:23:44.113 回答
0

检查 jquery 中的差异后，我仍然找不到代码中的差异，但结束了以下操作：

从

carousel_item.width( child_size );

至

carousel_item.width( child_size - 25 );
于 2013-11-13T10:40:51.443 回答