0

在自定义图像轮播上弄脏了我的手。写了一些 jquery 让它工作，但遇到了一个问题。

单击“上一个”和“下一个”链接时出现问题：

  • 单击“下一步”时，如果到达最后一个可见项目，则缩略图容器 DIV 将滚动到负左。
  • 总滚动值取决于两个因素
  • 首先，如果剩余的缩略图超过 5 个，则 DIV 应滚动到 (itemWidth x 5)
  • 其次，如果剩余项目少于 5，则滚动值为 (itemWidth x remainingItems)

如果单击“上一个”和“下一个”按钮，如何计算单击时的滚动值？

供参考：http: //jsfiddle.net/ylokesh/8bHZq/2/

JavaScript 代码：

var extCarousel = {
        backBtn : $('.backward'),
        fwdBtn : $('.forward'),
        thumbItems : $('.slidetabcontent a'),
        carouselItem : $('.slide'),
        currentItemIndex : $('.currentIndex'),
        totalItemsCount : $('.currentMax'),
        lastItemIndex : $('.slidetabcontent a:last').index(),
        firstItemIndex : $('.slidetabcontent a:first').index(),
        defaultThumbnailSet : 5,

        generateCarousel : function() {
            var _this = this;
            _this.thumbItems.eq('0').addClass('current');
            _this.carouselItem.hide().filter(':first').addClass('active').show().find(_this.currentItemIndex).html($('.slide.active').index() + 1);

            _this.totalItemsCount.html(_this.thumbItems.length);
            _this.controlNavigation();              
        },

        controlNavigation : function() {

            var _this = this,
                currentIndex, lastItem, firstItem;

            // Back Button
            _this.backBtn.on('click', function(e){
                e.preventDefault();
                currentIndex = $('.slide.active').index() - 1,
                firstItem = _this.firstItemIndex - 1;

                if(currentIndex != firstItem) {
                    _this.moveCarousel(currentIndex);
                }
            });

            // Prev Button
            _this.fwdBtn.on('click', function(e){
                e.preventDefault();
                currentIndex = $('.slide.active').index() + 1,
                lastItem = _this.lastItemIndex + 1;

                if(currentIndex != lastItem) {
                    _this.moveCarousel(currentIndex);
                }
            });

            //Thumbnail Click
            this.thumbItems.on('click', function(e) {
                e.preventDefault();
                currentIndex = $('.slide.active').index();
                _this.moveCarousel(currentIndex);
            });

        },

        moveCarousel : function(currIndex) {
            var _this = this;
            _this.carouselItem.removeClass('active').fadeOut('fast').eq(currIndex).addClass('active').fadeIn('fast');
            _this.activateThumbnail(currIndex);
        },

        activateThumbnail : function(currIndex) {
            var _this = this;
            _this.thumbItems.removeClass('current').eq(currIndex).addClass('current');
            _this.setCurrentItemIndex(currIndex + 1);

            if(currIndex == _this.defaultThumbnailSet) {
                _this.slideThumbnails();
            }

        },

        slideThumbnails : function() {
            var _this = this;
            var remainingThumbnails = _this.thumbItems.length - _this.defaultThumbnailSet;
            var itemWidth = _this.thumbItems.width() + parseInt(_this.thumbItems.css('padding').split('px')[0]*2);
            if(remainingThumbnails > 5) {
                $('.slidetabcontent').animate({
                    'left' : -(itemWidth*5)
                }, 'slow');
            } else {
                $('.slidetabcontent').animate({
                    'left' : -(itemWidth*remainingThumbnails)
                },'slow');
            }
        },

        setCurrentItemIndex : function(currIndex) {
            var _this = this;
            _this.currentItemIndex.html(currIndex);
        },

        init : function() {
            var _this = this;
            _this.generateCarousel();
        }
    };
    $(document).ready(function(){
        var extensionCarousel = extCarousel.init();
    })
4

0 回答 0