Обмен местами с временным интервалом обеспечивает сопряжение

Question

Я рассмотрел некоторые похожие вопросы, но я не могу найти ответ, чтобы связать все это вместе.Я ищу способ создания слайд-шоу, в котором изображения и соответствующий текстовый блок меняются каждые 10 секунд.(Ниже, когда я заявляю «Поворот», я не имею в виду поворот на угол, я имею в виду переход от одного видимого слайда к другому)

Для дальнейшего разъяснения, давайте назовем один блок текста и одно изображение «парой»,Блок текста содержится в одном, а изображение содержится в другом.Для этого слайд-шоу у меня будет 10 пар.

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

Итак ... мой вопрос состоит из двух частей.1.) Правильно ли я подхожу к этому, и если да, то как обеспечить, чтобы текст и изображения оставались парами и вращались одновременно.2.) Вместо того, чтобы вращать содержимое внутри одного и того же div, я должен создать 10 пар div (всего 20) и создать скрипт, чтобы сделать 2 из 20 видимыми одновременно?если да ... какие-нибудь идеи по сценарию сделать это?

В настоящее время я использую следующий сценарий для обмена изображениями:

<!--- Start Image Cycler Script --->
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var timeDelay = 10; // change delay time in seconds
var Pix = new Array
("images2/slide_pics/92028.png" 
,"images2/slide_pics/92026.png" 
,"images2/slide_pics/92027.png" 
,"images2/slide_pics/92534.png" 
,"images2/slide_pics/92034.png" 
,"images2/slide_pics/92555.png" 
,"images2/slide_pics/92700.png" 
,"images2/slide_pics/A73495.png" 
,"images2/slide_pics/92701.png"  
);
var howMany = Pix.length;
timeDelay *= 1000;
var PicCurrentNum = 0;
var PicCurrent = new Image();
PicCurrent.src = Pix[PicCurrentNum];
function startPix() {
setInterval("slideshow()", timeDelay);
}
function slideshow() {
PicCurrentNum++;
if (PicCurrentNum == howMany) {
PicCurrentNum = 0;
}
PicCurrent.src = Pix[PicCurrentNum];
document["ChangingPix"].src = PicCurrent.src;
}
//  End -->
</script>
<!--- End Image cycler Script --->

        <img name="ChangingPix" src="images2/slide_pics/92028.png" alt="" width="570" height="346"  class="head-pic" />

Answer 1

(Извините, мой последний комментарий решил опубликовать сам)

Как предложил Кевин Нельсон, я просто поместил бы изображение и текст в один и тот же "блок".

<div id="slider">


    <div class="slide">
    <img src="#" alt"this is the image" />
    <p>This is the description for this particular slide</p>
    </div>

    <div class="slide">
    <img src="#" alt"this is the image" />
    <p>This is the description for this particular slide</p>
    </div>

    <div class="slide">
    <img src="#" alt"this is the image" />
    <p>This is the description for this particular slide</p>
    </div>

    </div>

Таким образом, вы не столкнетесь с какими-либо проблемами с синхронизацией текста и изображений.Существует множество бесплатных слайдеров контента / изображений.Я использую Slides.js для работы с клиентами в последнее время.Это действительно легко установить и настроить по своему вкусу.Он также имеет множество опций (например, пауза при наведении, автоматическое воспроизведение).

Answer 2

Может быть, я неправильно понимаю вопрос, но если вы хотите повернуть текст и изображения одновременно, почему бы вам не создать блоки и не повернуть весь блок. Смотрите эту страницу:

http://rhmachine.flashfirehosting.com/

Если я правильно понимаю вопрос, и вы хотите что-то подобное, дайте мне знать, и я опубликую плагин jquery, который я использую для этого.