如何在jquery中添加带有图像滑块的链接

Question

我制作了一个图像滑块，但是现在我想在每个图像上添加链接。

(function(){
 var srcs = [
"/images/options/family_4.jpg",
"/images/options/family_5.jpg",
"/images/options/family_3.jpg"
];
var links = [
"http://google.com",
"http://youtube.com",
"http://yahoo.com"
];

var currentIndex = srcs.length-1;
var changeBanner = function(){
    if(currentIndex == 0){
        da.jQuery(".banner-fade-img").fadeIn();
        currentIndex = srcs.length-1;
    } else {
        da.jQuery(da.jQuery(".banner-fade-img").get(currentIndex)).fadeOut();
        currentIndex--;
    }
}

var bannerSetup = function(){
_.each(srcs, function(src, index){
    da.jQuery(".image-container").append("<img class='banner-fade-img' style='top:0px;position:absolute; z-index:"+(index+2)+";' src=' "+src+"'></img>");

})
window.setInterval(changeBanner, 5000);
}

bannerSetup();
}())

我创建了两个数组，但不知道如何使用image..Please帮助me...How添加第二个数组来修复它？

Answer 1

为什么不将图像src和一个数组文字中的a href组合起来呢？这会容易得多，你可以这样做：

(function(){
    var datas = [
        {
            'image': "http://i.imgur.com/1fWTOIj.png",
            'url': "http://google.com",
        },
        {
            'image': "http://i.imgur.com/AhWrnN4.gif",
            'url': "http://youtube.com",
        },
    ]

    var currentIndex = datas.length-1;
        changeBanner = function(){
            if(currentIndex == 0){
                $(".banner-fade-img").fadeIn();
                currentIndex = datas.length-1;
            } else {
                $($(".banner-fade-img").get(currentIndex)).fadeOut();
                currentIndex--;
            }
        }
    console.log(currentIndex);

    var bannerSetup = function(){
        $.each(datas, function(index, src) {
            $(".image-container").append(
                '<a href="' + src.url + '">'
            +'<img class="banner-fade-img" width="150" height="150" src="' + src.image + '">'
                +'</a>'
            );
        })
        window.setInterval(changeBanner, 5000);
    }

    bannerSetup();
}())

http://jsfiddle.net/alleks/X6sfv/1/

Answer 2

我要用这个疯狂的guess..Try

append("<a href='"+links[index]+"' ><img class='banner-fade-img' style='top:0px;position:absolute; z-index:"+(index+2)+";' src=' "+src+"'></img></a>");