如何在div中的每个img中放入href(幻灯片Jquery)

Question

我从http://jonraasch.com/blog/a-simple-jquery-slideshow一切都很好。我想在div中为每张图片放一个超链接，但当我在其中放ahrefs时，它只显示第一张图片，而不显示其他图片。

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

注意：我希望幻灯片中的每张图片都有不同的链接。

Answer 1

您可以使用each函数。

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>