我不知道如何在单击操作中添加该代码a。问题在于我必须创建一个具有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>
上面的代码现在也是图片。
我害怕到目前为止,这是我能做的最好的...
$('#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);
});
});
[/edit]