Question

我从http://jonraasch.com/blog/a-simple-jquery-slideshow获得了一个Jquery幻灯片一切都很好。我想在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>

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

2 个答案: