2013-10-21 1 views
2

我制作了一个图像滑块,但现在我想在每个图像上添加链接。如何在jquery中添加带图像滑块的链接

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

我做了两个数组,但我不知道如何添加第二个数组与图像..请帮助我...如何解决它?

+0

我没有看到你的代码锚标签。你有什么尝试? – isherwood

+0

我想在每张图片上添加链接。 – user1050667

+0

是否要为每个图像添加链接?你能解释一个例子是HTML吗? – sinanakyazici

回答

1

为什么不能像src结合起来,与一个在一个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/

0

我正在野生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>");