Question

我需要制作一个在加载页面时启动的连续幻灯片。

当用户将鼠标悬停在屏幕上时，幻灯片暂停并且标题会向上滑动。当用户将光标放在其他位置时，标题向下滑动并继续幻灯片放映。当用户点击幻灯片中的图像时，他/她将被定向到相应的HTML。我可以使用任何类型的代码。我不是一个经验丰富的程序员，所以你必须真正详细说明它。我没有任何jQuery知识，但这次我可以使用它。这可能是之前被问到但我找不到它。抱歉我的英语不好。

编辑：顶部有http://www.cartoonnetwork.co.uk/（自动启动，停止在mousedown等处），但我希望鼠标离开时它会继续。我以前从未用闪光灯编程，所以它可能不是闪光灯吗？

我可以使用这些语言：

HTML（5）
CSS
的JavaScript
的jQuery

我会尝试用其他语言（如flash）来实现，但是因为我使用了它们（不包括jQuery），所以会更好。

编辑2：我喜欢Orbit（谢谢，迈克尔！）以及所有带定时器的滑块

注意：我没有钱花在任何事情上，所以记住这一点。

谢谢！

Answer 1

有很多方法可以做到这一点，包括详细的教程：

http://naldzgraphics.net/tutorials/25-must-learn-slider-tutorials-with-jquery/

http://www.tripwiremagazine.com/2011/10/jquery-image-slider-plugins.html

http://www.designyourway.net/blog/resources/28-useful-jquery-sliders-you-need-to-download/

http://webdesignfan.com/jquery-slider-tutorials-and-plugins/

http://vandelaydesign.com/blog/web-development/jquery-image-galleries/

http://machoarts.com/21-beautiful-jquery-sliders-for-your-next-project

http://designmodo.com/jquery-image-sliders/

Answer 2

你会找到很多你想要的jquery插件。 Here

Answer 3

你可以制作这样的HTML：

<div class="main_view">
                        <div class="window">
                            <div class="image_reel">
                                <a href="#">
                                    <img width="948" src="Images/Home/LIV.jpg" alt=""></a> <a href="#">
                                        <img width="948" src="Images/Home/JUM.jpg" alt=""></a> <a href="#">
                                            <img width="948" src="Images/Home/LOV.jpg" alt=""></a> <a href="#">
                                                <img width="948" src="Images/Home/BLI.jpg" alt=""></a>
                            </div>
                            <div class="pictureslide">
                                <h2>
                                    Livestrong</h2>
                                <p>
                                    Mobile donations to fight cancer and improve lives.</p>
                                <a href="http://thirteen23.com/work/#livestrong-donation">See more</a>
                            </div>
                            <div class="pictureslide">
                                <h2>
                                    Jumpshot</h2>
                                <p>
                                    The lighter side of serious software.</p>
                                <a href="/#jumpshot">See more</a>
                            </div>
                            <div class="pictureslide">
                                <h2>
                                    Flashback</h2>
                                <p>
                                    An exciting way to explore, stylize, and share your Facebook photos.</p>
                                <a href="/#flashback">See more</a>
                            </div>
                            <div class="pictureslide">
                                <h2>
                                    Love Universe</h2>
                                <p>
                                    Blurring the line between product and lifestyle.</p>
                                <a href="/#love-universe">See more</a>
                            </div>
                        </div>
                        <div class="paging">
                            <a href="#" rel="1">
                                <img src="Images/Home/LIV_sm.jpg" alt=""></a> <a href="#" rel="2">
                                    <img src="Images/Home/JUM_sm.jpg" alt=""></a> <a href="#" rel="3">
                                        <img src="Images/Home/LOV_sm.jpg" alt=""></a> <a href="#" rel="4">
                                            <img src="Images/Home/BLI_sm.jpg" alt=""></a>
                        </div>
                    </div>

然后你的JS：

var MainPageSlider = function (windowObj,element) {
    var parent = $("#"+element);//element is the ID of the Master/Parent of this HTMLCode
    parent.data('imagewidth', windowObj.imageWidth);
    parent.data('imageSum', windowObj.imagesum + 1);
    $(".paging a:first", parent).addClass("active");
    var intervalCulture;
    var imageReelWidth = parent.data('imagewidth') * parent.data('imageSum');

    $(".image_reel", parent).css({ 'width': imageReelWidth });

    rotate = function () {
        var triggerID = $active.attr("rel") - 1;
        var image_reelPosition = triggerID * (parent.data('imagewidth') + 30);
        $(".paging a", parent).removeClass('active');
        $active.addClass('active');

        $(".image_reel", parent).animate({
            left: -image_reelPosition
        }, 500);
    };

    rotateSwitch = function () {
        play = setInterval(function () {
            $active = $('.paging a.active', parent).next();
            if ($active.length === 0) {
                $active = $('.paging a:first', parent);
            }
            rotate();
        }, 7000);
    };
    rotateSwitch();
    $(".image_reel a", parent).hover(function () {
        clearInterval(play);
    }, function () {
        rotateSwitch();
    });

    $(".paging a", parent).click(function () {
        $active = $(this);
        clearInterval(play);
        rotate();
        rotateSwitch();
        return false;
    });
};
MainPageSlider(windowObj,'element');//element is the Parent of this HTML

然后为您的代码添加适当的样式。另外，根据需要编写悬停功能。

制作连续幻灯片 - 使用jQuery？

3 个答案: