在定制的图像轮播上弄脏了我的手。 编写了一些jquery以使其工作,但是遇到了一个问题。

问题在于单击“上一个”和“下一个”链接时:

  • 当单击“下一个”时,如果到达最后一个可见项目,则缩略图容器DIV将滚动到负向左。
  • 总滚动值取决于两个因素
  • 首先,如果剩余5个以上的缩略图,则DIV应滚动到(itemWidth x 5)
  • 第二,如果剩余项目少于5,则滚动值为(itemWidth x剩余项目)

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

供参考: 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();
    })

  ask by Lokesh Yadav translate from so

本文未有回复,本站智能推荐:

2回复

为什么我的类在运行时未定义。 Javascript模块模式

当我运行我的应用程序时,我得到:“未捕获的TypeError:无法读取未定义的属性'init'”文档reasdy函数中的警报运行,所以我知道jQuery在那时被加载。 但我不知道为什么任务未定义。 这是在MVC5应用程序中,并运行jQuery 1.10.2 请帮助,jsFiddle
2回复

用AMD定义的Javascript模块如何扩展?

首先,我们有一个引擎,该引擎由许多javascript文件组成,这些文件实质上是模块。 尽管在指定的命名空间下,这些模块返回分配给全局范围的单个类。 该引擎本身用于显示电子教学内容,每门不同的电子教学课程都需要稍有不同的需求,在该课程中,我们根据必要的功能将javascript文件包含到
1回复

Webpack模块RefrenceError模块未定义

我正在使用webpack2捆绑一些模块。 模块使用通用模块模式(不是CommonJS或AMD)编写。 但是当webpack尝试加载包时我收到错误; Webpack构建如下: 模块2是spUtil,模块1是listCrud。 单步执行dev工具调试器 - 加载spUti
1回复

显示模块模式返回值约定

如果我有一个包含很多类似内容的模块: 如何避免重复方法名称? 它们都出现在三个地方。 如果我要使用这样的局部变量: exp变量应称为什么? exp , exports , exported , obj , object ? 有关系吗? 有什么约定? 如果有比这
2回复

JavaScript模块模式与使用构造函数中定义的方法的构造函数

从单个实例和多实例的角度来看,为什么我会在模块模式之后编写所有那些额外的代码行,而只是使用带有在构造函数体中定义的方法和属性的标准构造函数? 模块模式示例: http : //jsfiddle.net/T3ZJE/1/ 构造函数示例: http : //jsfiddle.net/E
1回复

在ajax调用之后从Javascript模块返回值

---编辑---由于我的无知,这实际上与所有其他AJAX型问题相同...需要进入正确的心态。 为了后代的缘故,将其留在这里,也许可以帮助其他人在发布之前重新查看回调。 因此,我想先说一下,我认为这不是人们不等待异步调用完成的标准“如何从ajax调用返回值”问题。 我认为这是Java语言
1回复

在JAVASCRIPT模块模式中定义私有字段成员和继承

我可以使用下面的代码在模块模式中定义私有成员字段 这个方法工作得很好,但是这个问题的问题在于每当我创建一个新对象时,所有函数的副本都会被创建并加载到内存中(不像java那样,同一类的所有对象共享相同的函数内存) 我尝试使用下面的其他方法: 但是这个方法的问题是显然obj1,
1回复

模块模式错误:无法设置未定义的属性

该代码可在JSfiddle中使用: https ://jsfiddle.net/estevancarlos/w8yo3mp4/1/ 但是,它在我的实际项目http://veve.io/wip2中 不起作用 。 我得到错误: 我不知道是什么导致了这种分化。 有什么建议吗?
1回复

第一次实现模块模式变量是未定义的

这是我的代码 我正在实现这个例子http://css-tricks.com/how-do-you-structure-javascript-the-module-pattern-edition/ 但每次当我在此行输入我的输入字段时,我都会在警报中得到未定义 请告诉我我做错了
4回复

使用此JavaScript编码模式定义构造函数有什么好处?

我倾向于以下列方式编写对象构造函数: 我注意到一些JavaScript库和框架添加了一些额外的代码,如下所示: 我知道自执行匿名函数的作用和用途。 我目前未能看到的是,在定义构造函数及其原型时,它提供了哪些优势或好处。 编辑#1: 我知道模块模式及其优点,并且在我的