我正在使用javaScript / jQuery构建这个轮播的问题。
我知道我可能会找到一个插件来做同样的事情,但我对javaScript很新,需要练习。 Chrome给我一个
未捕获的TypeError:未定义不是函数
我假设它有语法错误,但我无法找到它。 Chrome在第42行声称是doc.ready函数。我做错了什么?
/* carousel
has a list of items
if the list size is greater than x, only show n based on screen size
each list item is composed of an image, title, description and button
the carousel will have an arrow on the left and right, allowing users to scroll through the list items
the list should wrap
the "show" strategy is:
-- if user clicks right arrow
---- get the last visible list item
---- check for the existence of a next item
---- if there isn't a next item
------ moved the first item of the list the then end of the list
------ display it
-- the inverse is also true*/
function initFeaturedWork() {
var $work = $('.featuredWork');
var $pageWrap = $('.page-wrap');
if ($work && $work.length > 0) {
if ($work.length <= 3) {
$work.show();
} else {
$.each($work, function(index) {
if (index < 4)
$(this).show();
else return;
});
$pageWrap.before(".backArrow");
$pageWrap.after(".forwardArrow");
$(".backArrow").show();
$(".forwardArrow").show();
}
}
}
$(document).ready(function() {
initFeaturedWork();
/*
* EVENT HANDLERS
*/
$(document).on('click', '.backArrow', function(e) {
var $lastWrap = $(this).siblings('.page-wrap').last();
var $threecolumn = $lastWrap.find('.threecolumn');
var $first_visible = $threecolumn.filter(':visible').first();
var $prev = $first_visible.prev();
var $moveFirst = $threecolumn.last();
if ($prev && $prev.length > 0) {
$threecolumn.filter(':visible').last().hide();
$prev.show();
} else {
$lastWrap.prepend(moveFirst);
moveFirst.show();
}
});
$(document).on('click', '.forwardArrow', function(e) {
var $firstWrap = $(this).siblings('.page-wrap').first();
var $threecolumn = $firstWrap.find('.threecolumn');
var $last_visible = $threecolumn.filter(':visible').last();
var $next = $last_visible.next();
var $moveLast = $threecolumn.first();
if ($next && $next.length > 0) {
$threecolumn.filter(':visible').first().hide();
$next.show();
} else {
$firstWrap.prepend(moveLast);
moveLast.show();
}
});
});