Question

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

我的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>

jQuery的：

var urls = [ 'http://www.google.com','http://www.microsoft.com','http://www.yahoo.com' ];
var images = [ 'http://www.placehold.it/2000x500/ff0000.png','http://www.placehold.it/2000x500/00ff00.png','http://www.placehold.it/2000x500/0000ff.png' ];
var cur_image = 0;
function changeBackground() {
    cur_image++;
    if ( cur_image >= images.length )
        cur_image = 0;

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

}


setInterval( changeBackground, 10000 );

和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;
}

http://jsfiddle.net/hnS9U/1/

我希望在图片交换时更改该锚标记（“featuredLinks”）的href，以便链接到图像所涉及的页面。

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

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

提前致谢！

Answer 1

基本上，href只不过是a元素的属性。您需要做的就是更改该属性的值。对于数组，如果您计划使用两个数组并且计划使每个数组的索引与另一个数组中的对应数据相对应，则可以使用相同的索引器cur_image作为{{ 1}} s，以及。

你试过了吗？

href

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

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

在你的功能中，这看起来像是：

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

如果您还有其他问题，请与我们联系。祝好运！：）

Answer 2

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

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

我使用了cur_image但你可以创建另一个var！

你的HTML语义坏了坏...链接中的div不是语义，尝试更改为span。

当图像滑块改变时，jQuery改变href

2 个答案: