如何用新的图像集替换图像集答案

【问题标题】：How to replace image set with new set of images如何用新的图像集替换图像集
【发布时间】：2013-11-17 05:05:51
【问题描述】：

在这里，我最初创建了一个带有 3 张图像的图像滑块，单击上一个/下一个按钮将替换上一个下一个图像。

我想点击 prev/next 按钮应该用 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/

我该怎么做？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

这是一种方法......

您将您的高级代码粘贴在一个函数中，并根据您想要的图像多次调用它。

http://jsfiddle.net/hV5DA/1/

$('.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();
    }
});

【讨论】：