JQuery Наведите курсор, чтобы изменить другой элемент на странице - PullRequest
Новая
       34

JQuery Наведите курсор, чтобы изменить другой элемент на странице

0 голосов
/ 08 февраля 2012

Я новичок в jQuery и пытаюсь создать интерактивный слайдер на Wordpress, который делает две вещи:

1) При наведении курсора он отображает новый div в главном окне фотографии

2) При нажатии на ссылку, вы переходите на эту страницу

Однако консоль ошибок сообщает мне, что next не определено позже в скрипте.

Это то, что я до сих пор: 

    function slideShow() {
            var current = jQuery('#featArea.show');
        var next = jQuery('#defaultImg');

        $('div#featLinkWorkshop a').hover (
            function() {
                next = jQuery('div#featWorkshops');
            }

//repeat the above for each section

    current.removeClass('show');
        next.fadeIn().addClass('show');

        setTimeout(slideShow, 3000);
    }

HTML 

<div id="defaultImg" class="featImg show">
    <img src="#" />
</div>

<div id="featWorkshops" class="featImg">
    <img src="#" />
<div class="featImgCaption">

    <h1>Caption Title</h1>
    <p>Sentence of interest.</p>
    </div>
</div>

Затем в HTML 

<div class="featLink" id="featLinkWorkshop">
    <img src="#" />

    <a href="#">Workshops</a>
</div>

Вот страница, на которой вы можете ее просмотреть: http://www.toppling -dominoes.com / Севенокс .Огромное спасибо!

ОБНОВЛЕНИЕ: я установил, что ползунок почти функционирует с помощью идей вахтеров и этого урока .Плагин цикла имеет гораздо больше, чем я думал.

1 Ответ

0 голосов
/ 08 февраля 2012

попробуйте плагин цикла jquery: http://jquery.malsup.com/cycle/

1 - вы можете пойти сюда, чтобы увидеть, как генерировать миниатюры: http://jquery.malsup.com/cycle/pager2.html

2-, а здесь, чтобы увидеть, какчтобы создать заголовки: http://jquery.malsup.com/cycle/caption.html

объединение этих двух вместе позаботится о части sildeshow, остальное - вопрос стилей CSS.

...