轮播失败无法解释答案

【问题标题】：Carousel Failure Unexplained轮播失败无法解释
【发布时间】：2014-10-31 13:29:38
【问题描述】：

所以我有这个轮播，但似乎没有工作，我不知道为什么。我在$(document).ready() 中有这个功能，但是当我点击next/prev 时，它不起作用。所以我想也许我做错了什么，因为它似乎根本没有把它捡起来。

HTML：

<div id="jb-video-carousel">
  <span class="business-left"></span>
  <ul class="jb-videos-container">
    <li class="jb-video-container">test</li>
    <li class="jb-video-container">test</li>
    <li class="jb-video-container">test</li>
    <li class="jb-video-container">test</li>
  </ul>
  <span class="business-right"></span>
</div>

JS：

(function () {
    var defaults = {
        container: '.jb-videos-container',
        wrap: '.jb-video-carousel',
        item: '.jb-video-container',
        btnPrev: '.business-left',
        btnNext: '.business-right'
    };

    var itemsPerPage = 0,
        totalPages = 0,
        page = 1,
        $items = $(defaults.item, el),
        $wrapper = $(defaults.wrap, el),
        $container = $(defaults.container, el),
        $next = $(defaults.btnNext, el),
        $prev = $(defaults.btnPrev, el),
        itemWidth = $items.eq(0).outerWidth(true),
        margin = itemWidth - $items.eq(0).width(),

    moveToPage = function (n) {
        var scalar = n > 1 ? n - 1 : 0,
            rem = $items.length - (scalar * itemsPerPage),
            left = 0;

        if (rem < itemsPerPage) {
            left = (($items.length) * itemWidth) - $wrapper.width();
        } else {
            left = scalar * (itemsPerPage * itemWidth);
        }

        $container.css('left', -left);
        page = n;
    },

    layout = function () {
        itemsPerPage = Math.floor(($wrapper.outerWidth() + margin) / itemWidth);
        totalPages = Math.ceil($items.length / itemsPerPage);

        if (totalPages === 1) {
            $prev.hide();
            $next.hide();
        }
        else {
            $prev.show();
            $next.show();
        }
    },

    onResize = function () {
        layout();
        moveToPage(page);
    },

    pagePrev = function () {
        var destination = page - 1;
        if (destination <= 0) {
            destination = 1;
        }
        moveToPage(destination);
    },

    pageNext = function () {
        var destination = page + 1;
        if (destination > totalPages) {
            destination = totalPages;
        }
        moveToPage(destination);
    };

    $container.css({
        'position': 'absolute',
        'width': (itemWidth * $items.length)
    });

    $(window).on('resize', function (evt) {
        onResize(evt);
    });

    $next.on('click', function (evt) {
        pageNext();
        return false;
    });

    $prev.on('click', function (evt) {
        pagePrev();
        return false;
    });

    domready(function () {
        setTimeout(onResize);
    });
});

【问题讨论】：

您检查过控制台中的错误吗？
当然，完全没有错误
请创建MCVE example 来重现问题。
请提供 codepen 或 jsfiddle 链接供我们测试/检查。这使测试过程更容易，并让您有机会单独测试此代码。
你忘记执行函数了，最后一行应该是}());。然后在$items = $(defaults.item, el) 和以下行中出现el is not defined 错误，最后domready 未定义，只需使用$(function(){...})。

标签： javascript jquery html css

【解决方案1】：

您的匿名函数根本没有被执行：

(function() {});   // declares an anonymous function (useless)
(function() {})(); // declares AND EXECUTES an anonymous function instantly

因此，您必须在最后一个分号之前添加一对括号。

【讨论】：

【解决方案2】：

声明一个函数和执行一个函数是有区别的。为什么你在你的代码中这样做是声明一个匿名函数。为了调用该函数，您应该在其末尾放置一对括号 ()，后跟一个分号 ;，例如：

(function() {
    // function definition
}());

【讨论】：

最好使用匿名声明执行范式方式，如下面的 lxg 所示。