Question

我有一个像这样的列表项目，其中包含图像

 <li class="fluidratio" id="transparent-btns1_s1" style="display: list-item; transition: opacity 500ms ease-in-out 0s; float: none; position: absolute; opacity: 0; z-index: 1;">
        <div class="bg pg target thumbnail">
            <img class="thumb big" src="http://images01.inmotico.com/318/642/3186422000RC/580X420/679b12140b5450eeade90df9b0dc0a2d.JPG" name="secondary" style="margin-top: -19.5px;">
        </div>
        <div class=" pagination_img">2 de 12</div>
    </li>
  <li class="fluidratio" id="transparent-btns1_s1" style="display: list-item; transition: opacity 500ms ease-in-out 0s; float: none; position: absolute; opacity: 0; z-index: 1;">
        <div class="bg pg target thumbnail">
            <img class="thumb big" src="http://images01.inmotico.com/318/642/3186422000RC/580X420/679b12140b5450eeade90df9b0dc0a2d.JPG" name="secondary" style="margin-top: -19.5px;">
        </div>
        <div class=" pagination_img">2 de 12</div>
    </li>
  <li class="fluidratio" id="transparent-btns1_s1" style="display: list-item; transition: opacity 500ms ease-in-out 0s; float: none; position: absolute; opacity: 0; z-index: 1;">
        <div class="bg pg target thumbnail">
            <img class="thumb big" src="http://images01.inmotico.com/318/642/3186422000RC/580X420/679b12140b5450eeade90df9b0dc0a2d.JPG" name="secondary" style="margin-top: -19.5px;">
        </div>
        <div class=" pagination_img">2 de 12</div>
    </li>
  <li class="fluidratio" id="transparent-btns1_s1" style="display: list-item; transition: opacity 500ms ease-in-out 0s; float: none; position: absolute; opacity: 0; z-index: 1;">
        <div class="bg pg target thumbnail">
            <img class="thumb big" data-src="http://images01.inmotico.com/318/642/3186422000RC/580X420/679b12140b5450eeade90df9b0dc0a2d.JPG" name="secondary" style="margin-top: -19.5px;">
        </div>
        <div class=" pagination_img">2 de 12</div>
    </li>

在第3个列表元素之后，我在data-src标记中添加了图像的网址。

在小提琴中你可以看到两个按钮来移动下一个或上一个图像。所以我想检查下一个或前三个图像，如果它有attribut data-src我想把它改成src。如果没有那么什么也不做，检查下一个。

这是工作的小提琴。

LinkForFIddle

如果不是这种方法，那么我对任何其他解决方案都是开放的。如果我能做那个，可能还有ajax

更新

这是另一个链接。在这个例子中，我可以在单击按钮后将所有data-src更改为src。但我试图只改变接下来的3个连续图像 Example 谢谢＆amp;问候

Answer 1

获取接下来的3张连续图片意味着简单slice是不够的，因为您可以到达图片列表的末尾。以下示例应演示此问题：

var imgs = [0, 1, 2, 3, 4, 5], // every number stands for an image
    currentIndex = 3;

// For getting the next three images a simple slice is not enough:
var result = imgs.slice(currentIndex+1, currentIndex+1+3);
console.log(result); // result is [4, 5]

因此，在数组的边框处，您需要函数slice 的两次调用的组合。
然后可以为您的问题编写一个jQuery解决方案：

/**
 * Find the previous elements and jump to the beginning of the list, if no more
 * elements are available at the right side of the list
 * 
 * @param  {Object} $elements A jQuery object with the elements
 * @param  {Number} index     The current index
 * @param  {Number} num       The number of elements to return
 *
 * @return {Object}           A jQuery object with the found elements
 */
function next($elements, index, num) {
    // first try to slice enough elements (a maximum of num) 
    // of the right side of the index
    var $found = $elements.slice(index+1, index+1+num),
        diff = num - $found.length;

    // if there are not enough elements make a second slice 
    // at the beginning of the array
    if(diff) {
        $found = $found.add($elements.slice(0, diff));
    }
    return $found;
};

/**
 * Find the previous elements and jump to the end of the list, if no more
 * elements are available at the left side of the list
 * 
 * @param  {Object} $elements A jQuery object with the elements
 * @param  {Number} index     The current index
 * @param  {Number} num       The number of elements to return
 *
 * @return {Object}           A jQuery object with the found elements
 */
function prev($elements, index, num) {
    // first try to slice enough elements (a maximum of num) 
    // of the left side of the index
    var $found = $elements.slice(Math.max(index-num, 0), Math.max(index, 0)),
        diff = num - $found.length;

    // if there are not enough elements make a second slice 
    // at the end of the array
    if(diff) {
        $found = $found.add($elements.slice($elements.length - diff));
    }
    return $found;
};

/**
 * A helper function for choosing between next and prev 
 * on the basis of the direction
 * 
 * @param  {Object} $elements A jQuery object with the elements
 * @param  {Number} index     The current index
 * @param  {Number} num       The number of elements to return
 * @param  {Number} direction The direction to search for elements
 *                            1 stands for forwards and -1 for backwards
 *
 * @return {Object}           A jQuery object with the found elements
 */
function nextOrPrev($elements, index, steps, direction) {
    var func = direction === 1 ? next : prev;
    return func($elements, index, steps);
}

要使用示例，您必须跟踪当前索引和方向。由于您使用的是插件responsiveSlides，因此您可以这样做：

var lastIndex = 0,
    index = 0,
    direction = 1,
    $lis = $(".rslides li"),
    len = $lis.length;

$("#slider1").responsiveSlides({
    startidx: 0,
    auto: false,
    pager: true,
    nav: true,
    speed: 500,
    maxwidth: 540,
    namespace: "transparent-btns",
    before: function(i) {
        // there is a bug that the index is sometimes -1, here is the fix:
        if(i < 0) {
            i = len + i;
        }
        lastIndex = index;
        index = i;
        direction = (lastIndex+1)%len === index ? 1 : -1;
    }
});

您要做的最后一件事是替换

$lis.each(function(i, n) {

使用此行：

nextOrPrev($lis, lastIndex, limit, direction).each(function(i, n) {

以下是完整的 jsfiddle-example

如何使用Jquery each（）方法遍历列表中的next / Previous 3元素

1 个答案: