-1

我有一个图片库，可以在单击缩略图时交换主图片。我也希望在单击时将 img 标题显示在主图像上方的 div 中。图像交换正在使用此代码。我是 jquery 的新手，所以会很感激任何帮助。

$(document).ready(function() {
$("#gallery li img").click(function(){
    $('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));   
});

var imgSwap = [];
 $("#gallery li img").each(function(){
    imgUrl = this.src.replace('thumb/', '');
    imgSwap.push(imgUrl);   
});

$(imgSwap).preload();
});

$.fn.preload = function() {
this.each(function(){
    $('<img/>')[0].src = this;
});
}

<div class="wrap">
<div id="gallery">
<div id="caption"></div><img src="gallery/img_1.jpg" alt="" width="940" height="534" id="main-img" />
<ul>
  <li><img src="gallery/thumb/img_1.jpg" id="imgcap" title="this is cap 1" alt="" width="220" height="125" /></li>
  <li><img src="gallery/thumb/img_2.jpg" id="imgcap" title="this is cap 2" alt="" width="220" height="125" /></li>
  <li><img src="gallery/thumb/img_3.jpg" id="imgcap" title="this is cap 3" alt="" width="220" height="125" /></li>
  <li><img src="gallery/thumb/img_4.jpg" id="imgcap" title="this is cap 4" alt="" width="220" height="125" /></li>
  <li><img src="gallery/thumb/img_5.jpg" id="imgcap" title="this is cap 5" alt="" width="220" height="125" /></li>
  <li><img src="gallery/thumb/img_6.jpg" id="imgcap" title="this is cap 6" alt="" width="220" height="125" /></li>
  <li><img src="gallery/thumb/img_5.jpg" id="imgcap" title="this is cap 7" alt="" width="220" height="125" /></li>
  <li><img src="gallery/thumb/img_6.jpg" id="imgcap" title="this is cap 8" alt="" width="220" height="125" /></li>
</ul></div></div>
4

3 回答 3

0

试试这个，

$("#gallery li img").click(function(){
    $('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));   
    $("#caption").html($(this).attr('title'));
});
于 2013-01-25T07:47:28.177 回答
0

我认为这应该更好：

$(document).ready(function(){

    // for each element exists now and will be added in the future and is matched by this selector, will add a click function that does the work
    $("#gallery li img").live("click", function(){
        $('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));   
        $("#caption").html($(this).attr('title'));
    });
    $("#gallery li img").first().click();
}
于 2013-01-25T07:54:29.003 回答
0

你可以这样做

<html>
    <head>
    <title></title>
    <meta charset="utf-8">
    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function(){ 
            $("#thumb_gallery > li > img").click(function(){ 
                $("#caption").html($(this).attr('title'));
            });
        });
    </script>
    </head>
    <body>
    <div id="gallery">
<div id="caption"></div><img src="gallery/img_1.jpg" alt="" width="500" height="200" id="main-img" />
<ul id="thumb_gallery">
  <li><img src="gallery/thumb/img_1.jpg" id="imgcap" title="this is cap 1" alt="" width="20" height="12" /></li>
  <li><img src="gallery/thumb/img_2.jpg" id="imgcap" title="this is cap 2" alt="" width="20" height="12" /></li>
  <li><img src="gallery/thumb/img_3.jpg" id="imgcap" title="this is cap 3" alt="" width="20" height="12" /></li>
  <li><img src="gallery/thumb/img_4.jpg" id="imgcap" title="this is cap 4" alt="" width="20" height="12" /></li>
  <li><img src="gallery/thumb/img_5.jpg" id="imgcap" title="this is cap 5" alt="" width="20" height="12" /></li>
  <li><img src="gallery/thumb/img_6.jpg" id="imgcap" title="this is cap 6" alt="" width="20" height="12" /></li>
  <li><img src="gallery/thumb/img_5.jpg" id="imgcap" title="this is cap 7" alt="" width="20" height="12" /></li>
  <li><img src="gallery/thumb/img_6.jpg" id="imgcap" title="this is cap 8" alt="" width="20" height="12" /></li>
</ul></div>

    </body>
</html>

我改变了我的测试尺寸

于 2013-01-25T08:42:03.377 回答