如何将图像集替换为新的图像集
How to replace image set with new set of images
在这里,我最初创建了一个包含 3 张图像的图像滑块,其中单击上一个/下一个按钮将替换上一个下一个图像。
我想点击上一个/下一个按钮应该用上一个/下一个 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/
我该怎么做?
这是一种方法...
您将高级代码粘贴到函数中,并根据需要前进的图像多次调用它。
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();
}
});
相关文章:
- 使用javascript的图像替换循环
- 是否可以仅通过jQuery将图像替换为用户动态选择的另一个图像
- 用图像替换SVG
- 将href中的图像替换为其他元素中的图像
- 错误时用图像替换视频
- 以编程方式将fabric-js-canvas的图像替换为hq图像,并重新计算其他对象的坐标和大小
- jQuery 图像替换为类
- 可以用我自己的自定义图像替换光标
- jQuery-图像替换转换〔Safari中的问题〕
- d3.js用图像替换节点
- 用图像替换页面,而不是添加图像
- 可以动态设置图像替换文本吗
- JQuery - 单击时将背景图像替换为另一个背景图像
- 将鼠标悬停在另一个图像上时,将图像替换为另一个图像
- HTML:用图像替换文本微笑
- 将所有图像替换为一个图像 Javascript
- 在 jquery 中使用类和 ID 将一个图像替换为另一个图像
- 如何用自定义图像替换脸书按钮
- 在 PHP 中将一个外部图像替换为另一个内部图像
- 将图像替换为另一个图像,然后在超时后再次替换 - Javascript