хочу чтобы находил случайный img, но не работает код
Есть div с классом block_img в нём картинки img. (они скрыты) Я их нахожу и вставляю в другой div... но не могу вывести именно случайную картинку, ибо arrImg[rand] как описано во всех примерах не хочет взять эту случайную картинку.
var block_img = document.querySelectorAll('.block_img img');
var block_image_show_one = document.querySelector('.block_image_show_one');
for (var i = 0; i < block_img.length; i++) {
var arrImg = block_img[i];
var rand = Math.floor(Math.random() * arrImg.length);
block_image_show_one.appendChild(arrImg);
}
В итоге я их нахожу и вставляю в нужный мне div , но только все картинки. А надо только одну случайную... В чём проблема? Спасибо за помощь. |
Цитата:
|
Цитата:
|
Цитата:
Сформировали, получаете по этому индексу изображение (путь/имя), отображаете. |
Цитата:
|
Вот пример на learn.javascript.ru
var arr = ["Яблоко", "Апельсин", "Груша", "Лимон"]; var rand = Math.floor(Math.random() * arr.length); alert( arr[rand] ); Он же работает. Случайным образом получает значение массива ... |
orionpro,
arrImg у вас одна картинка какую длину вы хотите получить у одной картинки в arrImg.length? |
orionpro,
var block_img = document.querySelectorAll('.block_img img');
var block_image_show_one = document.querySelector('.block_image_show_one');
var rand = Math.floor(Math.random() * block_img.length);
var arrImg = block_img[rand];
block_image_show_one.appendChild(arrImg);
|
Цитата:
Цитата:
Ну так как он работает? :) |
Цитата:
var block_img = document.querySelectorAll('.block_img img');
я уже выбираю все картинки? Просто, как-то сталкивался с тем, что только циклом можно было успешно сделать.
var elem = document.querySelectorAll(".historyList");
// цикл проверяет все элементы с классом historyList
for (var i = 0; i < elem.length; i++) {
elem[i].remove(); // и потом удаляет их
}
Если убираем цикл и пытаемся удалить elem.remove(); то ничего не работает.(elem.remove is not a function). Наверное из-за этого и решил применить такое и на img. Большое спасибо, Ваш код работает, как надо! |
Цитата:
|
Цитата:
var block_img = document.querySelectorAll('.block_img img');
var block_image_show_one = document.querySelectorAll('.block_image_show_one');//блоки
block_img = [].slice.call(block_img);
for (var i=0; i<block_image_show_one.length; i++) {
var rand = Math.floor(Math.random() * block_img.length);
var arrImg = block_img.splice(rand,1)[0];
if(arrImg)block_image_show_one[i].appendChild(arrImg);
}
|
Цитата:
var block_img = document.querySelectorAll('.block_img img'); - ну так запуская цикл именно для block_img, указывая block_img.length, понимаете же, что это коллекция. Циклом вы лишь перебираете ее, что может потребоваться для каких-то операций. |
Цитата:
var block_image_show_one = document.querySelectorAll('.block_image_show_one, .block_image_show_two, .block_image_show_three'); //блоки
и всё работает ,супер (добавляет). Вот только я не совсем понял, что происходит в этом коде var arrImg = block_img.splice(rand,1)[0];он разделяет массив block_img с помощью rand случайно, но что такое [0]? Он оставляет один элемент в массиве, если их больше? |
Или rand - случайное значение массива, т.е. в данном случае - картинка случайная?
|
orionpro,
splice возвращает "вырезку" в виде массива, поэтому [img], вырезали случайно 1 элемент из block_img, чтоб эта картинка больше не участвовала в конкурсе :) получили массив из одной картинки -- но нам нужна сама картинка а не массив, поэтому [img][0] |
Цитата:
|
Особенно эту строчку
block_img = [].slice.call(block_img);. Мы в ней создаем пустой массив, потом... splice возвращает, а call... пока не понимаю. Создаем массив из картинок, что-ли, но потом мы это применяем в переменной arrImg и там опять splice . |
Как я понял,
[].slice.call(block_img) Мы вызываем метод slice прототипа Array (то бишь массива) и применяем его к аргументу block_img ? Поправьте меня пожалуйста. Может я не так понимаю. |
Цитата:
Цитата:
|
orionpro,
block_img = [].slice.call(block_img); превращение выборки картинок из псевдо-массива в настоящий массив var arrImg = block_img.splice(rand,1) вырезание части массива картинок [0] и выборка из вырезанного первого элемента; |
Цитата:
var arrImg = block_img.splice(rand,1)[0] Вы мне это уже объяснили. |
Цитата:
|
orionpro,
на всякий случай slice и splice разные методы :) |
Цитата:
Цитата:
Цитата:
Цитата:
|
Цитата:
|
Цитата:
var rand = Math.floor(Math.random() * block_img.length); |
|
В принципе картинки лучше гонять по кругу(Из опыта войны во вьетнаме)
Особенно если их менее десятка. Поскольку зачастую одни и те же повтряются, а какой нидь 3-й элемент долго отсутствует Гонять рандомно стоит картинки с цитатами и когда их много |
Цитата:
|
Опять к Вам с вопросом люди добрые). Продолжение того что выше, вывожу в canvas картинки...
var canvas = new fabric.Canvas('c');
var imgElement = document.querySelector('.block_image_show_1 .my-image');
var imgInstance = new fabric.Image(imgElement, {
});
var canvas2 = new fabric.Canvas('c');
var imgElement2 = document.querySelector('.block_image_show_2 .my-image');
var imgInstance2 = new fabric.Image(imgElement2, {
left: 100
});
var canvas3 = new fabric.Canvas('c');
var imgElement3 = document.querySelector('.block_image_show_3 .my-image');
var imgInstance3 = new fabric.Image(imgElement3, {
left: 200
});
var imgGroup = [imgInstance, imgInstance2, imgInstance3];
canvas.add(new fabric.Group([imgInstance, imgInstance2, imgInstance3], {
}));
for (var v = 0; v < imgGroup.length; v++) {
}
var btn = document.querySelector('.btn');
btn.addEventListener('click', function() {
imgGroup[v].animate('left', 500, {
onChange: canvas.renderAll.bind(canvas),
duration: 5000,
easing: fabric.util.ease.easeOutBounce
});
});
В переменной var imgGroup лежат все картинки, хочу в этом моменте весь массив использовать, чтобы анимировать все картинки сразу (их просто будет больше)
imgGroup[v].animate('left', 500, {
onChange: canvas.renderAll.bind(canvas),
duration: 5000,
easing: fabric.util.ease.easeOutBounce
});
но не могу использовать все массивы. Если написать просто imgGroup[0], то один элемент спокойно себе анимируется... Что делать? ps цикл я для пробы создал, но он не работает , точней не хочет анимация работать... |
orionpro,
кто его знает, что такое fabric ... так-что лучше почитать вам документацию ... и не только на fabric |
Цитата:
|
orionpro,
строку 23 может перенести на 30 и 25 на 36 :-? |
Цитата:
|
| Часовой пояс GMT +3, время: 06:09. |