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

Question

我正在将jQuery滑块Easy Slider与幻灯片一起用作其他页面的链接。 加载的其他页面还具有带有相同幻灯片，相同顺序和相同链接的滑块。

我无法弄清楚页面加载后如何设置当前幻灯片。

例如：有四张幻灯片。 单击幻灯片3并加载页面后，我希望滑块位于幻灯片3上。 链接很令人沮丧，然后必须浏览上一张幻灯片。

我最初是使用AJAX从幻灯片链接中加载其他页面的，但是当加载其他页面并且不会调用$（document）.ready函数时，还会调用另一个jQuery脚本。

我没有在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

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

或使用服务器端（php）更改图像的顺序

或jquery查找元素并使用.detach（）然后使用.append（）将其放回堆栈顶部

希望这可以帮助

Answer 2

我不确定该插件的具体含义，但我建议您使用AnythingSlider- http ://css-tricks.com/anythingslider-jquery-plugin/-该插件可让您使用哈希标签链接到特定的幻灯片。 因此，您的链接将附加＃slide-4之类的内容-该插件随后将其设置为活动链接。

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');
});