这里我创建了一个图像滑块,最初有3个图像,点击前/下一个按钮将替换prev下一个图像。
我想点击上一个/下一个按钮应该用prev / next 3图像(不仅仅是一个)完全替换图像。
var stPt = 0, elToShow = 10; //showing 10 elements
var $ul = $('ul.ice-navigator');
var $li = $('ul.ice-navigator li'); //get the list of li's
var $copy_li = [];
var copy_lgt = $li.length - elToShow;
//call to set thumbnails based on what is set
initNav();
function initNav() {
var tmp;
for (var i = elToShow; i < $li.length; i++) {
tmp = $li.eq(i);
$copy_li.push(tmp.clone());
tmp.remove();
}
}
$('.ice-next').click (function () {
$li = $('ul.ice-navigator li'); //get the list of li's
//move the 1st element clone to the last position in copy_li
$copy_li.splice(copy_lgt, 0, $li.eq(0).clone() ); //array.splice(index,howmany,element1,.....,elementX)
//kill the 1st element in the UL
$li.eq(0).remove();
//add to the last
$ul.append($copy_li.shift());
});
$('.ice-previous').click (function () {
$li = $('ul.ice-navigator li'); //get the list of li's
//move the 1st element clone to the last position in copy_li
$copy_li.splice(0, 0, $li.eq(elToShow-1).clone()); //array.splice(index,howmany,element1,.....,elementX)
//kill the 1st element in the UL
$li.eq(elToShow-1).remove();
//add to the last
$ul.prepend($copy_li.pop());
});
http://jsfiddle.net/devsvits/hV5DA/
我该怎么做?
答案 0 :(得分:0)
这是一种做法......
您将高级代码粘贴在一个函数中,并将其调用为您想要前进的图像的次数。
$('.ice-next').click (function () {
function nextItem(){
$li = $('ul.ice-navigator li'); //get the list of li's
//move the 1st element clone to the last position in copy_li
$copy_li.splice(copy_lgt, 0, $li.eq(0).clone() ); //array.splice(index,howmany,element1,.....,elementX)
//kill the 1st element in the UL
$li.eq(0).remove();
//add to the last
$ul.append($copy_li.shift());
}
//number of items to replace
var numItemsToAdvance = 3;
//call function n times
while(numItemsToAdvance--){
nextItem();
}
});