旋轉木馬失敗原因不明

Question

所以我有這個旋轉木馬，但似乎並沒有工作，我不知道爲什麼。我在$(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); 
    }); 
}); 

Answer 1

沒有被執行你的匿名函數都：

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

所以，你必須之前增加一對括號最後一個分號。

Answer 2

聲明函數和執行函數是有區別的。爲什麼你在代碼中做的是聲明一個匿名函數。爲了調用該函數，你應該把一對括號()在其結束後跟一個分號;，如：

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