Создание непрерывного слайд-шоу - используйте jQuery? - PullRequest
Новая
       3

Создание непрерывного слайд-шоу - используйте jQuery?

0 голосов
/ 05 ноября 2011

Мне нужно сделать непрерывное слайд-шоу, которое запускается при загрузке страницы.

Когда пользователь наводит курсор на него, показ слайдов приостанавливается, и заголовок перемещается вверх. Когда пользователь помещает курсор в другое место, заголовок скользит вниз, и слайд-шоу продолжается. Когда пользователь нажимает на изображение в слайд-шоу, он / она будет перенаправлен на соответствующий HTML. Я могу использовать любой тип кода. Я не опытный программист, поэтому вам придется по-настоящему детализировать это. У меня нет никаких знаний jQuery, но я могу использовать это на этот раз, может быть. Возможно, об этом спрашивали раньше, но я не смог его найти. Извините за мой плохой английский.

РЕДАКТИРОВАТЬ: что-то вроде http://www.cartoonnetwork.co.uk/ (запускается автоматически, останавливается при mousedown и т. Д.) Сверху, хотя я бы хотел, чтобы оно продолжалось, когда мышь выключалась. Я никогда раньше не программировал со вспышкой, так что, может быть, это может быть что-нибудь, кроме вспышки?

Я могу использовать эти языки:

  • HTML (5)
  • CSS
  • JavaScript
  • JQuery

Я попытаюсь сделать это с другими языками, такими как flash, но было бы лучше с упомянутыми, потому что я использовал их (исключая jQuery).

РЕДАКТИРОВАТЬ 2: Мне нравится Орбита (спасибо, Майкл!) И все ползунки, которые имеют таймер

NB. У меня нет денег на что-либо, поэтому имейте это в виду.

Спасибо!

Ответы [ 3 ]

1 голос
/ 05 ноября 2011

вы найдете множество плагинов jquery, которые делают то, что вы хотите. Здесь

1 голос
/ 05 ноября 2011
0 голосов
/ 05 ноября 2011

Вы можете создать такой 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

, а затем добавить надлежащие стили в свой код.Кроме того, напишите функцию для зависания, как вам требуется.

...