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

Я рассмотрел некоторые похожие вопросы, но я не могу найти ответ, чтобы связать все это вместе. Я ищу способ создания слайд-шоу, в котором изображения и соответствующий текстовый блок меняются каждые 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" />

2 ответа

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

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

<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 для работы с клиентами в последнее время. Это действительно легко настроить и настроить по своему вкусу. Он также имеет множество опций (например, пауза при наведении, автоматическое воспроизведение).

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

http://rhmachine.flashfirehosting.com/

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

Другие вопросы по тегам