使用以下脚本，单击PREV时，我无法快速将数组的焦点设置回列表中。
它应该像这个例子一样工作：
我的代码
你能否指出我在这里做错了什么，我很感激
上的代码示例<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.focus { color: red; }
</style>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.6.1.min.js"></script>
<script>
$(document).ready(function() {
var snippet = {
index: 0,
indexNew: 0,
start: 0,
$el: 'div.snippet-categories',
config: {
itemsVisible: 4
},
data: {
items: {
models: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
}
},
navigate: function(direction) {
if (direction === 'right') {
if (this.index < this.config.itemsVisible - 1) {
if (this.index < this.config.itemsVisible - 1) {
this.index++;
var result = '#' + this.index + '';
$('li.focus').removeClass('focus');
$(result).addClass('focus');
} else {
this.start++;
}
} else {
if (this.start < this.data.items.models.length - this.config.itemsVisible) {
this.start++;
this.renderItems();
var result = '#' + (this.config.itemsVisible - 1 + this.start) + '';
$('li.focus').removeClass('focus');
$(result).addClass('focus');
}
}
}
else if (direction === 'left') {
if (this.index > this.config.itemsVisible - 1) {
if (this.index > this.config.itemsVisible - 1) {
this.index--;
(Focus.to(this.getFocusable(-1, true)));
} else {
this.start++;
}
} else {
if (this.start > this.data.items.models.length - this.config.itemsVisible) {
this.index--;
this.renderItems();
} else {
}
}
}
},
render: function() {
this.renderItems();
},
renderItems: function(reverse) {
var reverse = reverse || false;
var html = '', result = '', subset = null;
var range = this.data.items.models;
var limit = range.length - this.config.itemsVisible;
if (this.indexNew !== null) {
if (reverse === false) {
} else {
}
subset = range.slice(this.start, this.start + this.config.itemsVisible);
var i = 0;
while (i < subset.length) {
var x = subset[i];
result += '<li id="' + this.data.items.models[x] + '" data-idx="' + this.data.items.models[x] + '" class="focusable">' + this.data.items.models[x] + '</li>';
i++;
}
html = result + '</ul>';
var el = $(this.$el);
el.empty();
el.append(html);
} else {
console.log('limit STOP');
}
},
};
snippet.render();
$('#next').click(function() {
snippet.navigate("right");
});
$('#prev').click(function() {
snippet.navigate("left");
});
});
</script>
</head>
<body>
<div class="snippet-categories"></div>
<div id="prev">prev</div>
<div id="next">next</div>
</body>
</html>
这个问题与
有关Are you able to solve it? JavaScript carousel implementation using an array
答案 0 :(得分：0)
最后我解决了它
Algo这里的例子 http://jsfiddle.net/QwATR/
Snippet_Categories = (function(Snippet) {
var Snippet_Categories = function() {
this.config = {
curPos: 0, // index for selected element
itemVisible: 4, // number of items visible
minIndex: 0, // define visible area start
maxIndex: 4 - 1, // define visible area end = "itemVisible -1"
outItems: 0 // number of element out of visible area
};
this.data = {
items: arguments[1].items
};
this.construct.apply(this, arguments);
};
$.extend(true, Snippet_Categories.prototype, Snippet.prototype, {
init: function() {
this.index = 0; // set default index
this.indexNew = 0; // set next index
this.start = 0;
this.render();
},
create: function() {
return this.parent.$el.find('.snippet-categories');
},
removeFocus: function() {
var test = $('li.focus');
Focus.blur(test);
//$('li.focus').removeClass('focus');
},
focus: function() {
//$('ul > li:eq(' + this.config.curPos + ')').addClass('focus');
var test = $('ul > li:eq(' + this.config.curPos + ')');
return Focus.to(test, true);
},
render: function() {
//debugger
this.renderItems();
this.focus();
},
renderItems: function() {
var html = '<ul>';
for (var i = 0; i < this.config.itemVisible; i++) {
html += '<li data-idx="' + this.data.items.at(i + this.config.outItems).get('id') + '" class="">' + this.data.items.at(i + this.config.outItems).get('label') + '</li>';
}
html += '</ul>';
$('.snippet-categories').empty();
$('.snippet-categories').html(html);
},
navigate: function(direction) {
if (direction === 'right') {
if (this.config.curPos < this.config.maxIndex)
{
this.removeFocus();
if (this.config.curPos < this.config.maxIndex)
this.config.curPos++;
else
{
this.config.outItems++;
}
} else {
if (this.config.outItems < this.data.items.length - this.config.itemVisible)
this.config.outItems++;
}
this.renderItems();
this.focus();
}
else if (direction === 'left') {
if (this.config.curPos > this.config.minIndex)
{
this.removeFocus();
if (this.config.curPos > this.config.minIndex)
this.config.curPos--;
else
{
this.config.clicks--;
}
} else {
if (this.config.outItems > 0)
this.config.outItems--;
}
this.renderItems();
this.focus();
}
},
onFocus: function() {
//this.index = parseInt(Focus.focused[0].dataset.idx, 10);
console.log('element in focus ' + this.index);
}
});
return Snippet_Categories;
})(Snippet);