如何使用JavaScript/jQuery在幻灯片导航中实现“当前图片”指示器?

Question

我有一个幻灯片在我的网站，这是工作良好。现在我有了这些链接，比如，1 2 3 4 5。如果你按1，你会到图像1。但现在这些链接实际上是圆圈，像这样:

0 0 0 0 0 0

如果你按下它们，它们会被填充颜色。

但这些都是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

您应该为您的图像添加一个类，例如:'button'，然后你可以用这样的语句:

$(".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>标签。这将在单击其中一个链接时执行这两行代码。

Answer 2

工作演示

查找包含按钮的元素的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!