1

在另一篇文章（jQuery FlexSlider 隐藏滑块但保留手动控件的可见性）中，用户 LJ902 回答了您如何链接到 Flexslider 中的特定图像。它可以完美运行，但前提是链接与图像位于同一页面中。

我想要的：在首页上，有一堆图像缩影..当您单击其中一个时，您会进入一个新页面，其中显示在 Flexslider 中的所有图像，并且选择的是用户选择的图像在首页。

这是链接和图像的代码。注意链接中的“rel”：

<a rel="0" class="slide_thumb" href="#">slide link 1</a>
<a rel="1" class="slide_thumb" href="#">slide link 2</a>
<a rel="2" class="slide_thumb" href="#">slide link 3</a>

<div class="flexslider">
<ul class="slides">
    <li>
        <img src="demo-stuff/inacup_samoa.jpg" />
        <p class="flex-caption">Captions and cupcakes. Winning combination.</p>
    </li>
    <li>
        <a href="http://flex.madebymufffin.com"><img src="demo-stuff/inacup_pumpkin.jpg"       /></a>
        <p class="flex-caption">This image is wrapped in a link!</p>
    </li>
    <li>
        <img src="demo-stuff/inacup_donut.jpg" />
    </li>
    <li>
        <img src="demo-stuff/inacup_vanilla.jpg" />
    </li>
    <li>
        <img src="demo-stuff/inacup_vanilla.jpg" />
    </li>
  </ul>
 </div>

这是脚本：

<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function($) {

$('.flexslider').flexslider({
    animation: "slide",
    slideshow: false,
    animationLoop: false,
    directionNav: true,
    slideToStart: 0,
    start: function(slider) {
        $('a.slide_thumb').click(function() {
            $('.flexslider').show();
            var slideTo = $(this).attr("rel")//Grab rel value from link;
            var slideToInt = parseInt(slideTo)//Make sure that this value is an integer;
            if (slider.currentSlide != slideToInt) {
                slider.flexAnimate(slideToInt)//move the slider to the correct slide  (Unless the slider is also already showing the slide we want);
            }
        });
    }

});

});

正如我所说，如果链接与 Flexslider 位于同一页面中，则上述内容可以正常工作。

但我希望链接位于首页，然后该链接必须链接到另一个页面，例如：

<a rel="0" class="slide_thumb" href="mySubpage">slide link 1</a>

但上述失败，因为我只进入子页面，没有显示正确的图像（它总是显示第一个）。

如果有人能给我提示如何解决这个问题，我将非常感激:)

谢谢，

五。

4

1 回答 1

0

你需要做的是在两个页面之间传递一个参数：

<a rel="0" class="slide_thumb" href="yourpage?img=0">slide link 1</a>
<a rel="1" class="slide_thumb" href="yourpage?img=1">slide link 2</a>

此处的参数名称为img，其值与 rel 属性相同（您不再需要该属性）。在目标页面上，您将添加一个逻辑来获取 url 参数，例如：

function getQueryParams(qs) {
    qs = qs.split("+").join(" ");
    var params = {},
        tokens,
        re = /[?&]?([^=]+)=([^&]*)/g;

    while (tokens = re.exec(qs)) {
        params[decodeURIComponent(tokens[1])]
            = decodeURIComponent(tokens[2]);
    }

    return params;
}

// assoziative object the key is the get parameter name
var $_GET = getQueryParams(document.location.search);

// now you only have to modify the line:
// var slideTo = $(this).attr("rel")//Grab rel value from link;
// like this:
var slideTo = (($_GET['img']) ? $_GET['img'] : 0);
// if img parameter is set, you slide to it, fallback is the first one.
于 2013-02-03T15:14:03.237 回答