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