Question

想澄清一下，这段代码不是我的，我在另一个主题中找到了它： jquery simple animate/rotate of a css background-image inside a div?

基本上它会使div更改其CSS背景：

jQuery("document").ready(function($){ 
  // cache the element
var $contentHeader = $('#contentHeader');

setInterval( function() {
    $contentHeader.css( 'background-image', function(i,bg) {
       return bg.replace(/\d/, function(str) { return (str % 4) + 1;});
    });
}, 5000);

});

它正常工作，更改背景图片，但我想添加链接到每个背景，所以我的问题是，有没有办法让它添加一个链接到它改变的每个背景图像，如一个位置.href所以每张图片都可以链接到不同的网站

HTML

<div id="contentHeader"></div>

CSS

#contentHeader {
    background: url("/site_theme/img/adds/bg-1.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 1px solid #dfdfdf;
    cursor: pointer;
    float: right;
    height: 100px;
    margin: 10px 10px 10px 0;
    position: relative;
    width: 670px;
}

Answer 1

此Fiddle中的不同方法（带有一些虚拟图像和链接）：为链接和图像定义数组，逐步遍历数组并将div包装在锚点中：

jQuery("document").ready(function($){ 
  var $contentHeader = $('#contentHeader'),
      links = [ "link1," "link2"],    // add links here
      images = [ "image1", "image2"],  // add images here
      i = 0;

  setInterval(function () {
    $('#contentHeader').css('background-image', 'url(' + images[i] + ')');
    $contentHeader.unwrap("a").wrap("<a href='http://" + links[i] + 
      "' target='_blank'/>");
    i++;
    if (i = images.length) i = 0;
    }, 3000);
});

也可以将其调整为二维数组以将图像和链接保持在一起，但也可以作为建议。

Answer 2

试试这个：

$("document").ready(function($){ 
  // cache the element
    var $contentHeader = $('#contentHeader'),a = $('#contentHeader').parent();

    setInterval( function() {
        $contentHeader.css( 'background-image', function(i,bg) {
           return bg.replace(/\d/, function(str) { return (str % 4) + 1;});
        });
        $(a).attr("href","your favorite href");
    }, 5000);

});

HTML

<a href="your favorite href"><div id="contentHeader"></div></a>

Answer 3

您是否不想更改HTML，可以执行以下操作：

jQuery("document").ready(function($){ 
// cache the element
var $contentHeader = $('#contentHeader');

$contentHeader.click(function() {
    location.href = "http://domain.com";
});

setInterval( function() {
    $contentHeader.css( 'background-image', function(i,bg) {
       return bg.replace(/\d/, function(str) { return (str % 4) + 1;});
    })
    .click(function() {
        location.href = "http://domain.com";
    });
}, 5000);

});

如果您希望该链接打开一个新窗口，您可以替换此...

location.href = "http://domain.com";

......有了......

window.open("http://domain.com");

请注意，我在2个地方添加click功能：一次在ready上，一次在setIntetval功能中，确保图像从一开始就可以点击。

编辑：要更改网址，请将它们添加到数组中，并在每次间隔过去时循环显示它们。所以请将其置于setInterval：

之上

var links = [
"http://domain.com/1",   
"http://domain.com/2",
"http://domain.com/3",
"http://domain.com/4",
"http://domain.com/5",
];

var i = 0;

然后按如下方式替换您的点击处理程序：

.click（function（）{ window.open（链接[I]）; }）; 我++;

请注意，我正在声明并递增变量i，因为我还没有看到你在代码中这样做。我假设它在其他地方完成，控制背景图像迭代。

以下是演示：http://jsfiddle.net/bxtjozp9/2/

你可以添加链接到div的不断变化的背景图像

3 个答案: