Как я могу реализовать индикатор «текущего изображения» в навигации по слайд-шоу с помощью JavaScript / jQuery?

Question

У меня есть слайд-шоу на моем сайте, который работает нормально. Теперь у меня есть эти ссылки, например, 1,2,3,4,5. Если вы нажмете 1, вы перейдете к изображению 1 и прочее. Но теперь эти ссылки на самом деле являются кругами, например:

O O O O O

И если вы нажмете их, они будут заполнены цветом.

Но это png-файлы, и когда у меня есть активный, он должен быть заполнен, но когда я щелкаю по другому, тот должен стать активным. Но я не могу изменить фоновое изображение с помощью CSS, потому что это не фоновое изображение. Я попробовал немного javascript и jquery, но не могу заставить его работать.

Ссылки построены так:

<a href="#" rel="5" id="image5" title="dada6"><img src="images/image.png" width="15" height="15" /></a>

И когда я нажимаю на них, изображение должно быть изменено, и когда я нажимаю на другое, старое должно снова стать нормальным, а новое должно стать активным.

У меня есть что-то вроде этого

 <a href="#" rel="1" id="image1" title="i am freaking fabulous"    onMouseOver="document.image001.src=linkPressed.src" onMouseOut="document.image001.src=link.src" onClick="document.image001.src=linkPressed.src"> <img src="images/Jamartss0.png" width="15" height="15" name="image001" /> </a>

Answer 1

WORKING DEMO

Найдите ID или class имя элемента, содержащего ваши кнопки:

<parent element>  // <-- FIND OUT THE CLASS OR ID NAME of the PARENT element
    <a></a>
    <a></a>
    ....
</parent element>

Допустим, это DIV с ID #navButtons

просто сделайте:

function navB(){
    var navbg = $('#navButtons a img').attr('src');
    $('#navButtons a img').click(function() {
       $('#navButtons a img').attr('src', navbg);
        $(this).attr('src', 'http://dummyimage.com/20x20/cf5/fff&text=+');  // SET REPLACEMENT IMAGE      
    });
}

navB();   // USE THIS CALL TO FUNCTION 'navB' WHENEVER YOU NEED IT IN THE REST OF YOUR SCRIPT!

Answer 2

Вы должны добавить класс к вашим изображениям, например.«Кнопка», то вы можете использовать что-то вроде:

$(".button").attr("src", "images/image.png");
$("#image5 img").attr("src", "images/image-with-color.png");

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

Обновление:

Я не знаю, что у вас уже есть, но что-то вроде этого было бы, где поставить строки:

$(function() {
    $(".button-link").click(function(){
        $(".button").attr("src", "images/image.png");
        $("img", this).attr("src", "images/image-with-color.png");
    });
});

и добавить class='button-link' к вашим <a> тегам.Эти две строки кода будут выполняться при каждом нажатии одной из ссылок.