0

我不知道如何在该代码中添加点击操作。问题是我必须创建一个包含 600 多张图片的页面，这在页面加载时非常繁重。所以我为每组图片都有一个标签，我只想通过点击来加载。在代码中现在只有一个选项卡来显示我的问题。功能：

$(document).ready(function(){
        jQuery('#mycarousel-1, #mycarousel-2, #mycarousel-3, #mycarousel-4, #mycarousel-5, #mycarousel-6, #mycarousel-7').jcarousel({
            horisontal: true,
            wrap:'circular',
            scroll:1,
            easing:'easeInOutBack',
            animation:1200
        });

菜单：

<section id="content">
    <div class="page3-row1 pad-2 tabs">
        <div class="col-8">
            <h2 class="h2 p2">Categorie:</h2>
            <div class="demo-container clear">
            <ul class="list-1 nav">
                <li><a href="#tab-1-modern">Modern Design</a></li>
            </ul>
        </div>
   </div>

编码：

<div class="col-9">
     <h3 class="h3-2">Design's:</h3> 
    <div id="tab-1-modern" class="tab-content gallery-photo">
        <div class="inner">
            <ul id="mycarousel-1" class="jcarousel-skin-tango">
                <li><a class="plus"     href="images/modern-001-big_b.jpg"><img src="images/modern-001_b.jpg" alt=""></a><a class="plus"     href="images/modern-002-big_b.jpg"><img src="images/modern-002_b.jpg" alt=""></a><a class="plus"     href="images/modern-003-big_b.jpg"><img src="images/modern-003_b.jpg" alt=""></a><a class="plus"     href="images/modern-004-big_b.jpg"><img src="images/modern-004_b.jpg" alt=""></a></li>
                        <li><a class="plus"     href="images/modern-005-big_b.jpg"><img src="images/modern-005_b.jpg" alt=""></a><a class="plus"     href="images/modern-006-big_b.jpg"><img src="images/modern-006_b.jpg" alt=""></a><a class="plus"     href="images/modern-007-big_b.jpg"><img src="images/modern-007_b.jpg" alt=""></a><a class="plus"     href="images/modern-008-big_b.jpg"><img src="images/modern-008_b.jpg" alt=""></a></li>
                        <li><a class="plus"     href="images/modern-009-big_b.jpg"><img src="images/modern-009_b.jpg" alt=""></a><a class="plus"     href="images/modern-010-big_b.jpg"><img src="images/modern-010_b.jpg" alt=""></a><a class="plus"     href="images/modern-011-big_b.jpg"><img src="images/modern-011_b.jpg" alt=""></a><a class="plus"     href="images/modern-012-big_b.jpg"><img src="images/modern-012_b.jpg" alt=""></a></li>
                        <li><a class="plus"     href="images/modern-013-big_b.jpg"><img src="images/modern-013_b.jpg" alt=""></a><a class="plus"     href="images/modern-014-big_b.jpg"><img src="images/modern-014_b.jpg" alt=""></a><a class="plus"     href="images/modern-015-big_b.jpg"><img src="images/modern-015_b.jpg" alt=""></a><a class="plus"     href="images/modern-016-big_b.jpg"><img src="images/modern-016_b.jpg" alt=""></a></li>
            </ul>
        </div>
    </div>
</div>

在上面的代码中现在也是图片。

4

1 回答 1

0

恐怕从你到目前为止所提供的，这是我能做的最好的......

$('#mycarousel-1 li').click(function() {
  // code here to load the images...
});

[编辑]

    <div class="col-9">
     <h3 class="h3-2">Design's:</h3> 
    <div id="tab-1-modern" class="tab-content gallery-photo">
        <div class="inner">
            <ul id="mycarousel-1" class="jcarousel-skin-tango">
                <li><a class="plus" thishref="images/modern-001-big_b.jpg"><img src="images/modern-001_b.jpg" alt=""></a><a class="plus"     href="images/modern-002-    big_b.jpg"><img src="images/modern-002_b.jpg" alt=""></a><a class="plus"     href="images/modern-003-big_b.jpg"><img src="images/modern-003_b.jpg" alt=""></a><a class="plus"     href="images/modern-004-big_b.jpg"><img src="images/modern-004_b.jpg" alt=""></a></li>
                <li><a class="plus" thishref="images/modern-005-big_b.jpg"><img src="images/modern-005_b.jpg" alt=""></a><a class="plus"     href="images/modern-006-big_b.jpg"><img src="images/modern-006_b.jpg" alt=""></a><a class="plus"     href="images/modern-007-big_b.jpg"><img src="images/modern-007_b.jpg" alt=""></a><a class="plus"     href="images/modern-008-big_b.jpg"><img src="images/modern-008_b.jpg" alt=""></a></li>
                <li><a class="plus" thishref="images/modern-009-big_b.jpg"><img src="images/modern-009_b.jpg" alt=""></a><a class="plus"     href="images/modern-010-big_b.jpg"><img src="images/modern-010_b.jpg" alt=""></a><a class="plus"     href="images/modern-011-big_b.jpg"><img src="images/modern-011_b.jpg" alt=""></a><a class="plus"     href="images/modern-012-big_b.jpg"><img src="images/modern-012_b.jpg" alt=""></a></li>
                <li><a class="plus" thishref="images/modern-013-big_b.jpg"><img src="images/modern-013_b.jpg" alt=""></a><a class="plus"     href="images/modern-014-big_b.jpg"><img src="images/modern-014_b.jpg" alt=""></a><a class="plus"     href="images/modern-015-big_b.jpg"><img src="images/modern-015_b.jpg" alt=""></a><a class="plus"     href="images/modern-016-big_b.jpg"><img src="images/modern-016_b.jpg" alt=""></a></li>
            </ul>
        </div>
    </div>
</div>

和脚本如下：

$('#mycarousel-1 a').click(function() {
  // this loads each image the same, but you can use the same technique to
  // load the correct images for each image
  var imgurl = $(this).attr('thishref');
  $(this).find('img').each(function() {
      $(this).attr('src',imgurl);
  });
});

[/编辑]

于 2012-10-23T15:37:51.883 回答