Вопрос: Почему мой скрипт оставляет содержимое пустым на 7-м контенте (ID: img_7)?
Все содержимое изменилось для ID img_1 - ID img_6, но когда я ударил этот седьмой интервал, он был пустым.
С моим сценарием я устанавливаю переменную ImageCnt равной нулю, я проверяю длину массива идентификаторов, которые все будут использоваться в функции nextImage, которая принимает один параметр, "направление", и я определяю, что моя функция заботится переходов: nextImage (направление).
<script>
var backgroundId = new Array();
var backgroundId = [
"img_1",
"img_2",
"img_3",
"img_4",
"img_5",
"img_6",
"img_7",
];
var ImageCnt = 0;
Стрелка левого перехода вызовет функцию nextImage с параметром "left", чтобы функция узнала, какое направление для увеличения ImageCnt, которое управляет идентификатором, сделанным кликабельным и видимым функцией nextImage. Например, nextImage ("right") сообщит функции nextImage для увеличения вниз на 1. Это делает так, что если ID img_4 визуализируется через скрипт, а функция nextImage вызывается с параметром "right",
function nextImage(direction)
{
var i=1;
while(i<8)
{
document.getElementById("img_" + i).style.opacity = "0"; //"un-render" the rest of the elements
document.getElementById("img_" + i).style.pointerEvents = "none";//"un-render" the rest of the elements
i++;
}
Здесь (см. Выше) я использую цикл while, чтобы заставить все идентификаторы "исчезнуть" - вновь выбранный будет снова появляться, и CSS приведет к очень плавному, приятному, безупречному переходу здесь.
ImageCnt = (ImageCnt + (direction == "left" ? backgroundId.length-1 : 1)) % backgroundId.length;
Здесь (выше) мы просто перебираем наши изображения с помощью ImageCnt, чтобы отслеживать выбранное изображение и переход справа/слева.
document.getElementById("img_" + ImageCnt).style.opacity = "1";
document.getElementById("img_" + ImageCnt).style.pointerEvents = "auto";
И, наконец, мы добавили число, сохраненное в ImageCnt, в "img_", чтобы выбрать конкретный идентификатор для восстановления. Непрозрачность и события указателя являются ключевыми игроками здесь.
}
И вот он у вас есть. Я сделал что-то неправильно, если вы можете найти проблему, помогите мне! Я искал ошибку:/
JS Fiddle: http://jsfiddle.net/EagyP/
Мой JS Fiddle не работает должным образом с переходами, но на www.testing.agcomputers.net, где я тестирую, он работает, хотя и с этой проблемой на img_7 - (я знаю, что не правильно размещать ссылку, я буду удалите это в ближайшее время)
Вы немного смешиваете ноль-индекс и одноиндексную нотацию. ImageCnt
идет от 0-6, ваш список изображений идет от 1-7. Поскольку (я полагаю) у вас нет img_0, он бомбит при поиске DOM для него.
Мой тест, похоже, указывает, что если вы измените свой img_7 на вызов img_0, вы будете настроены, хотя это решение быстро и грязно.
Более надежным решением было бы использовать значение, хранящееся в backgroundId[ImageCnt]
для поиска, например: document.getElementById(backgroundId[ImageCnt])
Это делает число (из ImageCnt
) отдельно от имени элемента, что позволяет вам называть элемент, который вы хотите, до тех пор, пока он находится в вашем backgroundId
массиве. (Который может быть улучшен другими способами, чтобы сделать ненужным.)