使用下一个和上一个按钮的Jquery幻灯片,我需要一段代码将幻灯片重置为第一个图像

时间:2013-01-15 23:27:24

标签: jquery html

我对jquery很新,我希望有人可以帮助我解决我遇到的这个小问题。我非常肯定我想要的这段特殊代码对于有更多经验的人来说很容易,因此这篇文章。

我有一个带有下一个和上一个按钮的Jquery幻灯片。当我去网站的其他部分然后回来时,幻灯片仍然在最后显示的图片上(我转动了自动幻灯片)。在此示例中,当我转到站点的其他部分时,幻灯片被隐藏。

所以我想要的是一段代码,使图像幻灯片重置为第一张图像。

这是我使用过的jquery和html:

Jquery的:

$(window).load(function() {
            var pages = $('#container #bottom .content .projects .tab .info .slide li'), current = 0;
            var currentPage, nextPage;

            $('#container #bottom .content .projects .tab .info .knoppen .buttons').click(function() {
                currentPage = pages.eq(current);
                if ($(this).hasClass('prevPic')) {

                    if (current <= 0)
                        current = pages.length - 1;
                    else
                        current = current - 1;
                } else {
                    if (current >= pages.length - 1)
                        current = 0;
                    else
                        current = current + 1;
                }
                nextPage = pages.eq(current);
                currentPage.hide();
                nextPage.show();
            });
        });

HTML幻灯片:

<div class="slide">
                                        <ul>
                                            <li><img src="img/portfolio/TM_Logos_huisstijl01.gif" />
                                            </li>
                                            <li><img src="img/portfolio/TM_Logos_huisstijl02.gif" />
                                            </li>
                                            <li><img src="img/portfolio/TM_Logos_huisstijl03.gif" />
                                            </li>
                                            <li><img src="img/portfolio/TM_Logos_huisstijl04.gif" />
                                            </li>
                                            <li><img src="img/portfolio/TM_Logos_huisstijl05.gif" />
                                            </li>
                                            <li><img src="img/portfolio/TM_Logos_huisstijl06.gif" />
                                            </li>
                                        </ul>
                                    </div>

我希望我提供了足够的信息,并感谢任何想要达到巅峰的人:)

问候, 升。

编辑,这是用于在项目之间滚动的代码,这使得在另一个项目中隐藏图像幻灯片:

    $(".project.buttons.panel").delegate(".button", "click", function onclick() {
    var currentProject$ = $(".projects .current.project")
        , project = "", nextProject$, previousProject$;
    if (this.getAttribute("href").match(/#next$/)) {
        nextProject$ = currentProject$.next();
        // If there is no next project,
        //  then check the first project
        if (nextProject$.length === 0) {
            nextProject$ = $(".projects .project:first");
        }
        // If there is still no project,
        //  then there is something wrong
        if (nextProject$.length === 0) {
            throw new Error("Unable to find a project");
        }
        project = nextProject$.attr("id");
    } else if (this.getAttribute("href").match(/#previous$/)) {
        previousProject$ = currentProject$.prev();
        // If there is no previous project,
        //  then check the last project
        if (previousProject$.length === 0) {
            previousProject$ = $(".projects .project:last");
        }
        // If there is still no project,
        //  then there is something wrong
        if (previousProject$.length === 0) {
            throw new Error("Unable to find a project");
        }
        project = previousProject$.attr("id");
    } else {
        throw new Error("Unknown command");
    }
    hashInfo.change({ project: project, tab: 1 });
    return false;
});

1 个答案:

答案 0 :(得分:0)

这样做,当你在项目之间滚动时,总是会在幻灯片div中显示第一个li?

$('.slide li').hide().filter(':eq(0)').show();