Question

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

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

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

我最初是使用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

您可以使用.live（）函数http://api.jquery.com/live/

通过AJAX调用旧脚本

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

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

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

3 个答案: