Показать сообщение отдельно
  #3 (permalink)  
Старый 18.10.2015, 12:33
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

Пожалуй, предложу самое банальное.

Сделать слайдер картинок. У нас есть массив ссылок на картинки:

var images = ['1.jpg', '2.jpg', '3.jpg'];


Задача: сделать слайдер, в котором картинки будут переключаться по кнопкам-стрелкам. Если мы нажимаем на последней картинке "next", то будет произведён переход к первой картинке, ну и с первой картинкой аналогично. Но если мы ничего не нажимаем, то картинки автоматом переключаются через время, заданное в переменной. Желательно это всё сделать с эффектами CSS3-transition. Ну как?

Так же, сделать это всё через классы, чтобы можно было сколько угодно вставлять таких слайдеров на странице.

var slider = new Slider();
slider.images = ['1.jpg', '2.jpg', '3.jpg'];
slider.delay = 3000;
slider.insertTo(document.body);

/*-------*/

var slider = new Slider({delay: 3000, images: ['1.jpg', '2.jpg']});
slider.insertTo(document.body);

slider.addEventListener('onslide', function() {
    alert('Картинка переключена!');
});
Ответить с цитированием