当图像滑块更改时jQuery change href

我有一个工作图像滑块，它使用jQuery来更改图像（是的，我知道在DIVs中使用背景图像不是最佳做法，但它是我页面其余部分唯一可用的方法）：

我的HTML：

<a id="featuredLink" href="#"><div class="featuredImages" style="background-image:url('http://www.placehold.it/2000x500/00ff00.png')"><div class="slide"></div></div></a>

和CSS：

.featuredImages {
    position:absolute;
    margin: 0; 
    height: 500px;
    width: 100%;
    background: transparent url('') no-repeat center;
    overflow: hidden;
}
.featuredImages .slide { 
    position: absolute; 
    margin: 0; 
    height: 500px;
    width: 100%;
    background: transparent url('') no-repeat center;
    overflow: hidden;
}

我想在图像交换时更改锚定标记（“FeaturedLink”）的href，以便它链接到与图像相关的页面

我想使用一个数组来存储链接（“URL”）和用于图像的相同循环计数器来跟踪要使用的链接

任何指向正确方向的指针都会很棒

---

提前谢谢

基本上，

href

s只不过是

a

元素的属性。您所需要做的就是更改该属性的值。对于数组，如果您计划使用两个数组，并且您计划让每个数组的索引对应于另一个数组中的对应项，那么您也可以对

href

使用相同的索引器

cur_image

您是否尝试过：

$("#featuredLink").attr("href", "hrefOfNewImage");

在您的情况下，这更像是：

$("#featuredLink").attr("href", urls[cur_image]);

在您的函数中，这看起来像：

function changeBackground() {
    cur_image++;
    if ( cur_image >= images.length )
        cur_image = 0;

    // change link
    $("#featuredLink").attr("href", urls[cur_image]);

    // change images
    $( '.featuredImages' ).css({
        backgroundImage: 'url(' + images[ cur_image ] + ')'
    });
    $( '.featuredImages .slide' ).fadeOut( 3000, function(){
        $( this ).css({
            backgroundImage: 'url(' + images[ cur_image ] + ')'
        }).show();
    } );

};

---

如果你还有任何问题，请告诉我。祝你好运！：）

您可以在changeBackground（）中添加此代码：

我使用了cur_图像，但您可以创建另一个var

---

你的HTML语义不好。。。链接中的div不是语义上的，请尝试更改为span。

谢谢您的快速回答，但我对JS还是相当陌生的。您介意告诉我如何将其添加到我提供的代码中吗？非常感谢。完成！如果您的代码的其余部分正在工作，那么应该马上就可以了。非常感谢！太棒了！如果光标已经位于图像上，则href不会更改，直到光标从图像上取下并重新放置在图像上。这是浏览器的原因还是jQuery可以纠正的问题？示例：URL应该更改，但读取URL的小弹出窗口可能不是浏览器的事情。

function changeBackground() {
    cur_image++;
    if ( cur_image >= images.length )
        cur_image = 0;

    // change link
    $("#featuredLink").attr("href", urls[cur_image]);

    // change images
    $( '.featuredImages' ).css({
        backgroundImage: 'url(' + images[ cur_image ] + ')'
    });
    $( '.featuredImages .slide' ).fadeOut( 3000, function(){
        $( this ).css({
            backgroundImage: 'url(' + images[ cur_image ] + ')'
        }).show();
    } );

};

$('#featuredLink').attr("href", urls[cur_image]);