jquery - jcarousel - 如何使轮播中的图像链接保持事件状态

Question

已成功添加 jcarousel 来浏览我的使用动态模板构建的 html 网站。但是，当我位于链接到的页面上时，我需要一个图像链接显示为事件状态，以便查看者知道他们在哪里。另外，每当我进入新页面时，当我需要它停留在它所在的最后位置时，jcarousel 就会回到其滚动位置的开头。希望这是有道理的。我在这里找到了一个很棒的演示，我已经下载了它，但无法弄清楚如何从演示中的图片库中删除我想要的元素。 http://blog.themeforest.net/tutorials/how-to-integrate-the-jquery-galleria-and-jcarousel-plugins/希望您能帮忙!

Answer 1

类似这样的事情应该可以帮助您开始。

编辑

这是一个更完整的示例。现在起始值是从您的网址中提取的。

例如。如果您网站的 URL 是 www.mysite.com/page2.html，您可以添加可通过 JavaScript 访问的 URL 参数(在本例中为“startVal”)。

因此，您的 URL 将类似于“www.mysite.com/page2.html?startVal=2”，其中 startVal=2 确定将轮播中的哪个项目设置为选定的起始项目。

<script type="text/javascript">

var $sel = null;
$(document).ready(function () {

    // This function helps pull out items from your URL. (in this case 'startVal') 
    $.urlParam = function (name) {
        var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
        if(results == null){ //if results is null then return "0"
            return 0;
        }
        return results[1] || 0;
    }

    //Get the value of startVal from the QueryString. (in the example below, it would return 2)
    //EXAMPLE: www.mysite.com/page2.html?startVal=2
    var startVal = parseInt($.urlParam('startVal'));

    $('#mycarousel').jcarousel({
        start: startVal //Use the value of startVal to determine which item the carousel should default to on page load.
    });

    //Get the image you wish to default as selected, again we do this based off the startVal we received from the URL
    $sel = $('#mycarousel li:nth-child(' + startVal + ')').find('img');
    $sel.css('border', 'solid 2px blue'); //Here we can format it however we want

    //This function assigns a click event to each item in the carousel and changes which one is selected. 
    $('#mycarousel img').click(function () {
        $sel.css('border', 'solid 0px white');
        $(this).css('border', 'solid 2px blue');
        $sel = $(this);
    });
});

</script>

编辑

您还需要添加您自己的验证。现在，我不检查“startVal”是否为空，或者请求的开始索引是否在可用项目的范围内。

编辑

因此，对于网站上的每个网址，您需要添加一个查询字符串参数来确定选择轮播中的哪个项目。

示例:

• www.mysite.com/page1.html?startVal=1
• www.mysite.com/page2.html?startVal=2
• www.mysite.com/page3.html?startVal=3
• www.mysite.com/page4.html?startVal=4

您需要验证所请求的项目确实存在。否则，如果 URL 请求项目编号 698 (www.mysite.com/page4.html?startVal=689)，则该项目将不存在，并且您可能会收到错误。

无意让这变得更加困惑，但我希望这能增加一些清晰度。