jQuery swap Следующее / Предыдущее изображение, изображения в массиве - PullRequest
Новая
       24

jQuery swap Следующее / Предыдущее изображение, изображения в массиве

0 голосов
/ 29 февраля 2012

У меня есть буквальный массив идентификаторов изображений, и мне нужно поменять их местами в <img src=""> на следующее или предыдущее изображение на событиях нажатия кнопок. Начальный идентификатор текущего изображения известен из предоставленной img src серверной части при начальной загрузке страницы.

Очевидно, что перед заменой необходимо создать URL-адрес с идентификатором цели, например: 

'http://site.com/images/' + imageID + '.jpg'

Я новичок в JS / jQuery и хотел бы выучить правильный, минималистичный подход. ТИА.

Мой код для начала: 

var images=["777777","666666","555555"];
var max = $(images).length;

$('#swapnextimg').click{
   $("#imageswap").attr('src', ...... );
}

<a id="swapnextimg"></a>
<a id="swapprevsimg"></a>
<div id="imagebox">
    <img id="imageswap" src="http://site.com/images/123456.jpg">
</div>

Ответы [ 3 ]

1 голос
/ 29 февраля 2012

Вот пример:

http://jsfiddle.net/ndFGL/

$(function() {
    // Image ID array
    var images = ['240', '260', '250', '123', '200'];
    var max = images.length;

    // Get current image src
    var curSrc = $('#imageswap').attr('src');

    // Find ID in image src
    var curID = curSrc.replace(/.*\/(.*?)\.jpg/i, '$1');

    var curIdx = 0;

    // Search image list for index of current ID
    while (curIdx < max) {
        if (images[curIdx] == curID) {
            break;
        }
        curIdx++;
    }

    // For convenience
    var imgSrcBase = 'http://placehold.it/';

    // Next image on button (and image) click
    $('#swapnextimg,#imageswap').click( function() {
        curIdx = (curIdx+1) % max;
        $("#imageswap").attr('src', imgSrcBase+images[curIdx]+'.jpg');
    });

    // Prev image on button click
    $('#swapprevsimg').click( function() {
        curIdx = (curIdx+max-1) % max;
        $("#imageswap").attr('src', imgSrcBase+images[curIdx]+'.jpg');
    });

});
0 голосов
/ 29 февраля 2012

Я предполагаю, что у вас есть один тег img и только один.И что цель этого состоит в том, чтобы изменить этот единственный тег изображения.

Для этого вам понадобятся кнопки nex и prev. 

<div id="container">
    <img src="#" data-num="" />
    <span class"prev">prev</span>
    <span class"next">next</span>  
</div>

Объект: 

var obj = [0: 'dog', 1: 'cat'];

сейчас для следующего и для работы.Мы собираемся взглянуть на метод .on().

$('.container span').on('click', function(){
    var $this = $(this), // span
        currentNum = $this.siblings('img').data('num'), // img data-num
        nextNum = $this.is('.next') ? currentNum+1 : currentNum-1, // if class is next add 1, if not remove 1
        link = "http://site.com/images/" + obj[nextNum] + ".jpg" // the link

    // either it's not the last images or it returns
    nextNum != obj.length() || return 

    $('img').attr('src', link).data('num', nextNum)

})

Надеюсь, это помогло вам.Если нет, пожалуйста, дайте мне знать

0 голосов
/ 29 февраля 2012

Попробуйте код ниже, 

var images=["777777","666666","555555"];
var max = $(images).length;
var imgPtr = 0;

$('#swapnextimg').click{

   if (imgPtr == max) {
       //comment the below return and set imgPtr to 0 for rotating the images
       return;
   }

   $("#imageswap").attr('src', 'http://site.com/images/' + images[imgPtr++] + '.jpg');
}

$('#swapprevsimg').click{

   if (imgPtr == 0) {
       //comment the below return and set imgPtr to max-1 for rotating the images
       return;
   }

   $("#imageswap").attr('src', 'http://site.com/images/' + images[imgPtr--] + '.jpg');
}

<a id="swapnextimg"></a>
<a id="swapprevsimg"></a>
<div id="imagebox">
    <img id="imageswap" src="http://site.com/images/123456.jpg">
</div>
...