Обновить содержимое DIV с помощью текущего слайда jQuery Cycle

Question

Обновить содержимое DIV с помощью текущего слайда jQuery Cycle

0

У меня возникают трудности с обновлением содержимого DIV с помощью текущего слайда слайд-шоу jQuery Cycle.

Вот функция ползунка, она в настоящий момент выводит текущий слайд как предупреждение (и работает).

$(function () {
$('#slideshow').cycle({
    fx: 'none',
    timeout: 1,
    continuation: 1,
    speed: 'fast',
    before: function (curr, next, opts) {
alert("Current slide " + opts.currSlide);
}
});

DIV выглядит следующим образом:

<div id="test">Hello</div>

И код, который я пытаюсь использовать (чтобы заменить конец кода выше):

$(function (curr, next, opts) {
var test = document.getElementById("test");
test.innerHTML = opts.currSlide;
});

Любые мысли о том, почему DIV не обновляется текущим слайдом #? К сожалению, ничего не происходит. Я все еще изучаю свой путь вокруг JS, поэтому любые указатели очень ценятся! Спасибо за ваше время.

notchris 13 март 2014, в 16:53

Источник

0

Эй, можешь добавить, что это за цикл? Кроме того, jsfiddle было бы неплохо.
JF it 13 март 2014, в 14:55
0

Конечно, извините за это. Я просто разместил копию моей локальной версии на моем сервере: buckmcgrane.com/360
notchris 13 март 2014, в 15:05

Теги:

javascript

jquery

html

css

2 ответа

1

ОК. Я сделал скрипку, и есть несколько замечаний. Сначала ваше действие, добавленное к начальному циклу, будет удалено, когда вы нажмете на свои кнопки. Здесь я сделал начальный цикл делать то, что вы хотите, и добавил кнопку, которую вы можете использовать для получения "моментального снимка". Обратите внимание, что селектор получает только видимое в настоящее время изображение.

мясо:

$('#slideshow').cycle({
    fx: 'none',
    timeout: 1,
    continuation: 1,
    speed: 'fast',
    before: function (curr, next, opts) {

    $('#testNum').html("Current slide " + opts.currSlide);

    var $img = $("#slideshow img:visible").clone();
    $("#test").html('').append($img);        }
});

// The button will work after you click fast,slow, or reverse. 
//  The reason for that is the .cycle function above replaces it 
//  as fast as you can see it. 
$("#btnCopy").on("click",function(){
    var $img = $("#slideshow img:visible").clone();
    $("#test").html('').append($img);
});

Joe Johnston 13 март 2014, в 14:37

0

Это выглядит потрясающе! Спасибо, что нашли время, чтобы посмотреть на это. Спасибо за настройку скрипки тоже! Кнопка не работает для меня, однако я действительно хочу найти способ отобразить текущий слайд # и сохранить его как переменную в PHP. Это может быть над моей головой, но это кажется возможным. Я пытался использовать PHP DOM для захвата содержимого DIV, где отображался слайд #, это не сработало, как планировалось.
notchris 13 март 2014, в 16:16
0

Кнопка работает после нажатия, быстро, медленно или назад. Я обновил скрипку с текстом. :)
Joe Johnston 13 март 2014, в 18:16
1

Ах! Это здорово, спасибо за вашу помощь, Джо! Сейчас я попытаюсь сохранить src скопированного фрейма как переменную в PHP. Пожелай мне удачи!
notchris 13 март 2014, в 18:42
1

Дополнительным преимуществом этого метода (не передавая opts obj) является возможность использовать любой метод слайдера, который оставляет только одно изображение видимым за один раз. Рад, что это помогает.
Joe Johnston 13 март 2014, в 18:53

Показать ещё 2 комментария

Ещё вопросы

Эй, можешь добавить, что это за цикл? Кроме того, jsfiddle было бы неплохо.
Конечно, извините за это. Я просто разместил копию моей локальной версии на моем сервере: buckmcgrane.com/360
Это выглядит потрясающе! Спасибо, что нашли время, чтобы посмотреть на это. Спасибо за настройку скрипки тоже! Кнопка не работает для меня, однако я действительно хочу найти способ отобразить текущий слайд # и сохранить его как переменную в PHP. Это может быть над моей головой, но это кажется возможным. Я пытался использовать PHP DOM для захвата содержимого DIV, где отображался слайд #, это не сработало, как планировалось.
Кнопка работает после нажатия, быстро, медленно или назад. Я обновил скрипку с текстом. :)
Ах! Это здорово, спасибо за вашу помощь, Джо! Сейчас я попытаюсь сохранить src скопированного фрейма как переменную в PHP. Пожелай мне удачи!
Дополнительным преимуществом этого метода (не передавая opts obj) является возможность использовать любой метод слайдера, который оставляет только одно изображение видимым за один раз. Рад, что это помогает.

Sam Battat · Accepted Answer · 2014-03-13T12-58-00.000Z

Эта переменная в opts объекта (opts.currSlide) не определена вне функции цикла/плагин, так что вы должны передать его функции

$(function () {
    $('#slideshow').cycle({
        fx: 'none',
        timeout: 1,
        continuation: 1,
        speed: 'fast',
        before: function (curr, next, opts) {
            getCurrSlide(opts.currSlide);
        }
    });
}):

function getCurrSlide(curr){
    $("#test").html(curr);
}

Это работает отлично! Большое спасибо за помощь, я действительно ценю это!