在页面加载时为 jQuery 滑块设置当前幻灯片 Easy Slider

Question

我正在使用带有幻灯片的 jQuery 滑块 Easy Slider 作为指向其他页面的链接。加载的其他页面也有带有相同幻灯片的滑块，以相同的顺序，具有相同的链接。

我不知道如何在页面加载时设置当前幻灯片。

例如：有四张幻灯片。单击幻灯片三并加载页面时，我希望滑块位于幻灯片三上。跟踪链接令人沮丧，然后必须导航回之前的幻灯片。

我最初是使用 AJAX 从幻灯片链接加载附加页面，但是在加载附加页面时会调用另一个 jQuery 脚本并且不会调用 $(document).ready 函数。

我没有修改 Easy Slider 脚本中的任何内容，并且正在使用默认选项。这是来自 Easy Slider 的幻灯片示例代码。

<!-- markup example for $("#slider").easySlider(); -->
<div id="slider">
    <ul>
        <li><a href="someLink1"><img src="images/01.jpg" alt="" /></a></li>
        <li><a href="someLink2"><img src="images/02.jpg" alt="" /></a></li>
        <li><a href="someLink3"><img src="images/03.jpg" alt="" /></a></li>
        <li><a href="someLink4"><img src="images/04.jpg" alt="" /></a></li>
    </ul>
</div>

我认为应该可以在 li 标签中添加一个 id 并以某种方式修改 JS 以引用它......只是不知道从哪里开始。

任何帮助和指导都会很重要！

谢谢。

Answer 1

我不确定该插件的具体情况，但我建议您使用 AnythingSlider - http://css-tricks.com/anythingslider-jquery-plugin/ - 这将允许您使用井号标签链接到特定幻灯片。因此，您的链接将附加类似 #slide-4 之类的内容 - 然后插件将其设置为活动链接。

Answer 2

您可以使用 .live() 函数http://api.jquery.com/live/通过 AJAX 调用您的旧脚本

或者使用服务器端(php)来改变imgaes的顺序

或 jquery 查找元素并使用 .detach() 删除，然后 .append() 将其放回堆栈顶部

希望对你有帮助

Answer 3

我没有用滑块测试过这个，但它的逻辑应该可以工作（使用 jQuery cookie 插件）：

// check if a cookie is stored
if( $.cookie('pageId') != null ){
    // change the order of the li elements according to cookie ID stored
    $('#slider ul li:lt('+$.cookie('pageId')+')').appendTo($("#slider ul"));
}

// initiate slider
$("#slider").easySlider();   

// handle click events
$('#slider a').click(function(e){
    // prevent the click from going through 
    e.preventDefault();
    // store cookie with clicked item index
    $.cookie("pageId",$('#slider a').index(this));
    // forward the user onwards to the link url
    window.location = $(this).attr('href');
});