3

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

4

1 回答 1

0

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

编辑

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

例如。如果您网站的 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”是否为空，或者请求的开始索引是否在可用项目的范围内。

编辑

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

例子：

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

并不是要让这更加混乱，但我希望这能增加一些清晰度。

于 2010-09-08T14:24:43.167 回答