Использование JQuery для изменения содержимого

У меня есть функция JQuery, которая изменяет содержимое, отображаемое на основе того слайда, который вы хотите просмотреть. Вы нажимаете один из трех кругов, а затем меняются, как слайд-шоу. Но единственная проблема заключается в том, что вам нужно щелкнуть один из кругов, чтобы изменить содержимое. Я хотел бы также иметь функцию JQUERY, которая заставляет желаемый контент проходить автоматически, возможно, с некоторой анимацией. Как я могу автоматизировать мой код?Использование JQuery для изменения содержимого

Живой Сайт: http://www.getstatewideroofing.com

JSFIDDLE: http://jsfiddle.net/h5wVc/4/

Моего Jquery (я использую 1.8.2):

$(document).ready(function() { 
$('.circle1').click(function() { 
    $('#slideshow img').replaceWith('<img src="images/roof.png"/>'); 
    $('#slideshow-bottom p').replaceWith('<p> Some text </p>'); 
}); 
$('.circle2').click(function() { 
    $('#slideshow img').replaceWith('<img src="https://sphotos-a.xx.fbcdn.net/hphotos- 
ash4/313870_456560374416571_509297138_n.jpg"/>'); 
    $('#slideshow-bottom p').replaceWith('<p>Some text</p>'); 
}); 
$('.circle3').click(function() { 
    $('#slideshow img').replaceWith('<img src="http://i.imgur.com/1hxQNiw.jpg"/>'); 
    $('#slideshow-bottom p').replaceWith('<p>Some text</p>'); 
}); 
});

источник

2013-03-22 user2096890

'$ ('# слайда-дно р') HTML ('вашей строки');' Http:.? // апи .jquery.com/html/ –

Или посмотрите .trigger – mplungjan

Вместо этого замены содержимого, почему бы не включить все три слайда в HTML и скрыть/показать/анимировать контейнер? –

Вот пример того, как можно построить свою автоматическую прокрутку функциональность. Обратите внимание: показ не будет перезапущен (я оставил это для вас) - here - это хорошее место для помощи. Пример, который я построил, автоматически запустит слайд-шоу и перейдет к следующему элементу в строке. Что вам нужно сделать, это добавить currentItem (см. Мой код) в конец массива, чтобы всегда был «следующий» слайд в строке. Этот код и намеки выше должны быть достаточными для того, чтобы вы могли создавать то, что ищете.

$(function() { 
    setInterval(update, 2000); 
}); 

function update() { 
    var ItemToLoad = currentItem.next(); 
    ItemToLoad.trigger('click'); 
    currentItem = ItemToLoad; 
}

Рабочий пример http://jsfiddle.net/h5wVc/20/

источник

2013-03-22 18:50:15

Я согласен с комментариями, что лучше иметь свои слайды доступны на странице и использовать CSS/JavaScript для анимации и отображать их соответствующим образом, очень простой способ для достижения того, что ваш вопрос задал, но чтобы установить начальный маркер, затем используйте setInterval для имитации щелчка на следующем слайде в группе. Что-то вроде

var marker = 1; 

var imgclick = function() { 
    marker = (marker === 3 ? 1 : ++marker); 
    $('.circle'+marker).click(); 
}; 

window.setInterval(imgclick,1000);

Целого числа после вызова imgclick задержки до следующего щелчка моделируется в мсе, а цикл будет сброшен после третьего слайда (хотя вы можете легко изменить, чтобы вместить любое количество слайдов, используя

marker = (marker === $("[class^=circle]").length ? 1 : ++marker);

Я обновил свою скрипку, чтобы показать эту работу - http://jsfiddle.net/h5wVc/28/

источник

2013-03-22 18:58:14

Использование JQuery для изменения содержимого

ответ

Смежные вопросы