0

我有以下 HTML 标记

<ul class="banner"> 
    <li class="current" id="0"><img src="images/first.png"/></li>
    <li id="1"><img src="images/second.png" /></li>
    <li id="2"><img src="images/third.png" /></li>
</ul>

我希望第一项滑出并被第二项替换，依此类推。最终项目将“循环”到第一个项目。数学逻辑很简单。

第一项成功滑出，但列表随后“折叠”到 0 高度，第二项<li>不会替换它。

这是我在 jQuery 中的内容：

// GLOBALS
$currentBannerImage;
// Before page is created
$(document).delegate("#indexpage", "pagebeforecreate", function()
{
// Get non current banner images
$nonCurrentBannerListItems = $("ul.banner li").not(".current");
// Hide them
    if ($nonCurrentBannerListItems.size() > 0)
    {
        $nonCurrentBannerListItems.each(function()
        {
            $(this).hide();
        }
       $currentBannerImage = 0;
    }
});
});
// When page has successfully loaded & been inserted into DOM
$(document).delegate("#indexpage", "pagebeforecreate", function()
{
// Prevent default image dragging behavior on desktops
$("img").on("dragstart",function(dragEvent)
{
    dragEvent.preventDefault();
});

$("ul.banner li").swipeleft(function()
{
    // Get Swiped element id
    // Get Current Element
    $currentElementID = $currentBannerImage;

    $newElementID = $currentElementID+1;

    // Slide the touched element left
    $('#'+currentElementID).hide("slide", {direction: "left"},1000);
    $('#'+$newElementID).show("slide",{direction: "right"},1000);
});
});
4

0 回答 0