jquery - 如何在 div 内的每个 img 中放置一个 href（幻灯片 Jquery）

Question

我从http://jonraasch.com/blog/a-simple-jquery-slideshow得到了一个 Jquery 幻灯片， 一切正常。我想在 div 中为每张图片添加一个超链接，但是当我将 ahrefs 放入其中时，它只显示第一张图片而不显示其他图片。

示例在链接中：http: //jonraasch.com/blog/a-simple-jquery-slideshow

注意：我想要幻灯片中每张图片的不同链接。

Answer 1

您可以使用每个功能。

var images = $('#slideshow').children('img');
$.each(images,function(){
   images.wrap('<a href="#"></a>');
});

注意：我自己没有尝试过这段代码。对不起。

Answer 2

试试这个 ：-

-----js中的变化----

    var $active = $('#slideshow a.active');

    if ( $active.length == 0 ) $active = $('#slideshow a:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow a:first');

------更改是css--------

/*** set the width and height to match your images **/

#slideshow {
    position:relative;
    height:350px;
}

#slideshow a {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow a.active {
    z-index:10;
    opacity:1.0;
}

#slideshow a.last-active {
    z-index:9;
}

</style>

---html中的变化---

<div id="slideshow">
   <a href="#"> <img src="image1.jpg" alt="Slideshow Image 1" class="active" /></a>
    <a href="#"> <img src="image2.jpg" alt="Slideshow Image 2" /></a>
    <a href="#"> <img src="image3.jpg" alt="Slideshow Image 3" /></a>
    <a href="#"> <img src="image4.jpg" alt="Slideshow Image 4" /></a>
</div>