Question

我的网站目前使用我开发的自定义jQuery图库系统...它运行良好，但我想添加一个我似乎无法弄清楚的功能。我希望用户不必单击每个缩略图，也可以单击完整图像本身以在库中前进。工作廊在这里：http://www.studioimbrue.com

代码如下：

$('.thumbscontainer ul li a').click(function() {
var li_index = $(this).parents('ul').children('li').index($(this).parent("li"));

    $(this).parents('.thumbscontainer').parent().find('.captions ul li').fadeOut();
 $(this).parents('.thumbscontainer').parent().find('.captions ul li:eq('+li_index+')').fadeIn();
});

});

和图库HTML标记如下：

<div class="container">
    <div class="captions" id="usbdrive">
     <ul>
         <li style="display:block">
                <img src="images/portfolio/usbdrive/1.jpg" />
                <div class="caption">
                 <span class='projecttitle'>Super Talent USB Drive Package.</span>
     A fancy, lavish package designed for Super Talent's specialty USB drive. It was known as the world's smallest flash drive <span class="amp">&amp;</span> it is dipped in gold!
                </div>
            </li>
         <li>
             <img src="images/portfolio/usbdrive/2.jpg" />
            </li>
         <li>
                <img src="images/portfolio/usbdrive/3.jpg" />
            </li>
         <li>
                <img src="images/portfolio/usbdrive/4.jpg" />
            </li>
         <li>
                <img src="images/portfolio/usbdrive/5.jpg" />
            </li>   
        </ul>
</div>

    <div class="thumbscontainer verticalthumbs">
        <ul>
            <li><a href="javascript:void(0);" name="usbdrive1"><img src="images/portfolio/usbdrive/1.jpg" /></a></li>
            <li><a href="javascript:void(0);" name="usbdrive2"><img src="images/portfolio/usbdrive/2.jpg" /></a></li>
            <li><a href="javascript:void(0);" name="usbdrive3"><img src="images/portfolio/usbdrive/3.jpg" /></a></li>
            <li><a href="javascript:void(0);" name="usbdrive4"><img src="images/portfolio/usbdrive/4.jpg" /></a></li>
            <li><a href="javascript:void(0);" name="usbdrive5"><img src="images/portfolio/usbdrive/5.jpg" /></a></li>
        </ul>
    </div>
</div>

Answer 1

您需要处理li元素的点击事件，并显示下一个li。

例如：

$('.container .captions li').click(function() {
    var nextLi = $(this).fadeOut().next().fadeIn();

    if (nextLi.length === 0)  //If we're the last one,
        nextLi = $(this).siblings(':first-child').fadeIn();
});

将另一个参数添加到我的自定义jQuery库

1 个答案: