-3

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

 <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>

在第三个列表元素之后，我在data-srctag 中添加图像的 url。

在小提琴中，您可以看到两个按钮来移动下一个或上一个图像。因此，我想检查 Next 或 Previous 3 个图像是否具有属性 data-src 我想将其更改为 src 。如果没有，则什么也不做并检查下一个。

这是它的工作小提琴。

LinkForFiddle

如果不是这种方法，那么我愿意接受任何其他解决方案，例如 . 如果我能做到的话，也许用 ajax

更新

这是另一个链接。在此示例中，单击按钮后，我可以将所有 data-src 更改为 src 。但我正在尝试仅更改接下来的 3 个连续图像 示例 谢谢和问候

4

1 回答 1

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 示例

于 2014-10-03T12:06:00.140 回答