2

我有一个使用 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”）和用于图像的相同循环计数器来跟踪要使用的链接。

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

提前致谢！

4

2 回答 2

3

基本上，hrefs 只不过是a元素的属性。您需要做的就是更改该属性的值。至于数组，如果您计划使用两个数组并且您计划让每个数组的索引对应于另一个数组中的对应项，那么您也可以cur_image对hrefs 使用相同的索引器 , 。

你有没有尝试过：

$("#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();
    } );

};

如果您还有其他问题，请告诉我。祝你好运！:)

于 2013-04-12T15:45:16.777 回答
0

您可以在 changeBackground() 中添加此代码：

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

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

你的 HTML 语义很糟糕很糟糕......链接内的 div 不是语义的，尝试更改为 span。

于 2013-04-12T15:52:40.590 回答