Question

我有一个图像库，当点击缩略图时，它会交换主图像。我想在点击主图像上方的div中显示img标题。图像交换正在使用此代码。我是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>

Answer 1

试试这个，

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

Answer 2

我认为这应该更好：

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

Answer 3

你可以这样做

<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>

我已经改变了测试的大小

jquery img和img title swap

3 个答案: