Question

我找到了一些非常简单的jquery滑块的代码。

jQuery(document).ready(function ($)
{

    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;

    $('#slider').css({ width: slideWidth, height: slideHeight });

    $('#slider ul').css({ width: sliderUlWidth, marginLeft: -slideWidth });

    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft()
    {
        $('#slider ul').animate({
            left: +slideWidth
        }, 200, function ()
        {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight()
    {
        $('#slider ul').animate({
            left: -slideWidth
        }, 200, function ()
        {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    $('a.control_prev').click(function ()
    {
        moveLeft();
    });

    $('a.control_next').click(function ()
    {
        moveRight();
    });

});

html是：

<div id="slider">
<a href="#" class="control_next">></a>
<a href="#" class="control_prev"><</a>
<ul id="picList" runat="server">
<li><img alt="" src="/Images/Piano.jpg"><p class="caption">Piano</p></li>
<li><img alt="" src="/Images/Violin.jpg"><p class="caption">Violin</p></li>
<li><img alt="" src="/Images/Flute.jpg"><p class="caption">Flute</p></li>
<li><img alt="" src="/Images/Oboe.jpg"><p class="caption">Oboe</p></li>
</ul>
</div>
<div id="dvPiano" style="display:none">Description here</div>
<div id="dvViolin" style="display:none">Description here</div>
<div id="dvFlute" style="display:none">Description here</div>
<div id="dvOboe" style="display:none">Description here</div>

有许多图像 - 滑块中显示的图像是在后面的代码中确定的。滑块中可能有10个图像，我无法知道哪个可能是第一个。

我的问题是：当有人点击向左或向右 - 并调用moveLeft（）或moveRight（）时...如何确定要显示哪个描述div（滑块下方）？我怎么知道'长笛'的图像目前正在显示并显示'dvflute'？

在jquery滑块中，显示哪个图像？

0 个答案: