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

您应该为图像添加一个类，例如。 '按钮'，然后你可以使用类似的东西：

$(".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

WORKING DEMO

查找包含按钮的元素的 ID 或类名称：

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

让我们说这是一个带有 ID #navButtons

的DIV

只是这样做：

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!

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

2 个答案:

WORKING DEMO