Блог

На моей странице есть меню, которое изменяет источник определенного div (). Элементы, являющиеся разделами, расположены в div, называемом foliolist

Div, в котором изменяется изображение, находится ниже:

 <div id="random"><img id="grouptabs" src="/u/i/1x0.jpg" /> </div>
  

Список элементов, которые изменяют div, они находятся в самом низу страницы

 <div class="foliolist"><a href="/u/i/2.png"><img src="/v/r.gif"/></a></div>
<div class="foliolist"><a href="/u/i/4.png"><img src="/v/r.gif"/></a></div>
<div class="foliolist"><a href="/u/i/6.png"><img src="/v/r.gif"/></a></div>
  

Код Jquery, который это делает

 $('.foliolist a').click(function(e) { 
  e.preventDefault(); 
  $('.foliolist a').css('background-color', 'transparent');  
  $(this).css('background-color', '#FFFFFF'); 
  $('#grouptabs').attr('src', $(this).attr('href')); 
});
  

Появится список элементов, первый из которых выбирается по умолчанию с помощью приведенного ниже кода

 $('#bubbles > #folioholder > .foliolist > a:first').each(function(e){
  $('.foliolist').css('background-color', 'transparent'); 
  $(this).parent().css('background-color', '#FFFFFF');
  $('#grouptabs').attr('src', $(this).attr('href'));
});
  

Я хочу добавить новые панели навигации, чтобы улучшить использование страницы, добавив изображения кнопок next и previous в дополнение к странице. Они будут расположены в левой и правой части страницы.

При нажатии левой кнопки next прогресс в таблице увеличивается, и то же самое для предыдущей кнопки, но она идет в обратном направлении.

Я не знаю, как подойти к этому, не выглядя глупо, поэтому буду признателен за любую помощь.

Спасибо

Небольшой комментарий: ваш последний фрагмент кода может быть заменен на $('#bubbles > #folioholder > .foliolist > a:first').click();

По актуальному вопросу :

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

 $('#btnNext').click(function(){
    //get current picture displayed
    var currPicSrc = $('#grouptabs').attr('src');
    var foundPic = false;
    var nextPic = "";        
    $('.foliolist a img').each(function(){
        if (foundPic) {nextPic = $(this).attr('src'); return false; }
        if ($(this).attr('src') == currPicSrc) {
            foundPic = true;
        }
    });
    if (nextPic == "") {
        nextPic = $('.foliolist:first a img').attr('src');
    }
    $('#grouptabs').attr('src', nextPic);
});

$('#btnPrev').click(function(){
    //get current picture displayed
    var currPicSrc = $('#grouptabs').attr('src');
    var foundPic = false;
    var prevPic = "";        
    $('.foliolist a img').each(function(){
        if ($(this).attr('src') == currPicSrc) {
            foundPic = true;
            return false;
        }
        if (!foundPic) {prevPic = $(this).attr('src'); }
    });
    if (prevPic == "") {
        prevPic = $('.foliolist:last a img').attr('src');
    }
    $('#grouptabs').attr('src', prevPic);
});
  

Это способ сделать это (я не рассматриваю случай, когда вы нажимаете предыдущий на первом рисунке / нажимаете следующий на последнем рисунке).

Другим способом было бы добавить идентификаторы к вашему изображению и поиграть с ними (особенно легко, если вы используете name like <img id="whatever1" /><img id="whatever2" /> [...] , чтобы вы могли получить текущее изображение с номером в идентификаторе, а затем выполнить цикл по нему.