Question

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

Answer 1

这样的事情应该让你开始。

编辑

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

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

因此，您的网址将显示为“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”是否为null，或者请求的起始索引是否在可用项的范围内。

修改

因此，对于您网站上的每个网址，您都需要添加一个查询字符串参数，以确定选择了“转盘”中的哪个项目。

示例：

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），它将不存在，您可能会收到错误。

这并不意味着让这更令人困惑，但我希望这增加了一些清晰度。

jcarousel - 如何在旋转木马中保持图像链接保持活动状态

1 个答案: