- 0
-
Обсуждения
-
-
By Nicolyasic · Posted
Вот хороший пример "Рандомайзер слов из списка". Тут вместо дивов с картинками инпуты, но сути дела не меняет. Кроме того работает с разным кразмером списка (код универсальный). Если в сорсе код найдешь увидишь как работает — там 3 строчки с тем же Math.random. Если будут трудности пиши тут, я оповещение увижу кину тебе код оттуда + объясню шо как. Вообще прикольно так можешь посмотреть другие страницы на сайте, потренироваться с js (для начала как раз пойдет). Ну я вовремя конечно -
Пытаюсь динамически сформировать группу элементов <input type="checkbox"> Элементы создаются, но не получается задать им надпись, хотя раньше, создавая их вручную в HTML, всё получалось.. vk-groups-3.html vk-groups-1.html наладил.. vk-groups-3.html -
Вы отучились на бухгалтера или программиста? Почему спрашиваю. Я финансист, бухгалтер. Естественно, в свое время отучился на курсах 1С, но как экономист. Поэтому могу помочь с развитием именно в этом направлении, так как опыт огромный. -
Всем привет.Не так давно начал изучать верстку.И кароче захотел создать слайдер на основе html css без js. Застрял булеты работают и стрелки также но только стрелки становяться видимы когда первый раз нажал на булет.До этого их никак немогу настроить. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .wrapper{ width: 700px; height: 400px; margin:0 auto; border:5px solid green; border-radius: 20px; overflow: hidden; position: relative; } .container{ width: 600px; height: 300px; border: 5px solid green; border-radius: 20px; margin: 20px auto; } .slider__items{ display: none; } .bullets{ display: flex; position: absolute; left:100px; bottom:30px; } .bullets__items{ width: 50px; height: 15px; border:2px solid green; border-radius: 20px; background-color: lightgreen; margin: 0 20px; } .images{ display: flex; } .images__items{ width: 600px; height: 300px; border-radius: 20px; margin-right: 55px; } .arrows__prev{ background-image: url(./img/next.png); background-size: contain; width: 40px; height: 40px; position: absolute; top:150px; left: 2px; } #slide1:checked ~ .images .image1{ margin-left: 0; } #slide2:checked ~ .images .image2{ margin-left: -655px; } #slide3:checked ~ .images .image3{ margin-left: -1310px; } #slide4:checked ~ .images .image4{ margin-left: -1965px; } #slide5:checked ~ .images .image5{ margin-left: -2620px; } #slide1:checked ~ .arrow__next .img2, #slide2:checked ~ .arrow__next .img3, #slide3:checked ~ .arrow__next .img4, #slide4:checked ~ .arrow__next .img5, #slide5:checked ~ .arrow__next .img1{ display: block; background-image: url(./img/next.png); background-size: contain; width: 40px; height: 40px; position: absolute; top:150px; right: 2px; } #slide1:checked ~ .arrow__prev .img5, #slide2:checked ~ .arrow__prev .img1, #slide3:checked ~ .arrow__prev .img2, #slide4:checked ~ .arrow__prev .img3, #slide5:checked ~ .arrow__prev .img4 { display: block; background-image: url(./img/prev.png); background-size: contain; width: 40px; height: 40px; position: absolute; top:150px; left: 2px; } </style> </head> <body> <div class="wrapper"> <div class="container"> <div class="slider"> <input type="radio" name="slider" class="slider__items" id="slide1"> <input type="radio" name="slider" class="slider__items" id="slide2"> <input type="radio" name="slider" class="slider__items" id="slide3"> <input type="radio" name="slider" class="slider__items" id="slide4"> <input type="radio" name="slider" class="slider__items" id="slide5"> <div class="bullets"> <label for="slide1" class="bullets__items"></label> <label for="slide2" class="bullets__items"></label> <label for="slide3" class="bullets__items"></label> <label for="slide4" class="bullets__items"></label> <label for="slide5" class="bullets__items"></label> </div> <div class="arrow__next"> <label for="slide1" class="arrows__item img1"></label> <label for="slide2" class="arrows__item img2"></label> <label for="slide3" class="arrows__item img3"></label> <label for="slide4" class="arrows__item img4"></label> <label for="slide5" class="arrows__item img5"></label> </div> <div class="arrow__prev"> <label for="slide1" class="arrows__item img1"></label> <label for="slide2" class="arrows__item img2"></label> <label for="slide3" class="arrows__item img3"></label> <label for="slide4" class="arrows__item img4"></label> <label for="slide5" class="arrows__item img5"></label> </div> <div class="images"> <img src="./img/1.jpg" alt="" class="images__items image1"> <img src="./img/2.jpg" alt="" class="images__items image2"> <img src="./img/3.jpg" alt="" class="images__items image3"> <img src="./img/4.jpg" alt="" class="images__items image4"> <img src="./img/5.jpg" alt="" class="images__items image5"> </div> </div> </div> </div> </body> </html>
-
Question
Tokolist
Проверка файла на существование - 2
Скрипт вычисляющий высоту контента в документе
Как подсчитать колличество сим. в textarea?
Добавить в избранное (Кроссбраузерные закладки) - http://www.tigir.com/addbookmark.htm
Дата в Опере (В IE отражает нормально в Опере примерно так: Сегодня: 31.7.107)
Короче надо замутить таймер который бы показывал сколько времени человек провел на сайте на яваскрипте.
Как значение переменной перекинуть из JavaScript в PHP?
как зделать ссылку ,чтобы при наведении на не? появлялась картинка ?
Проверка, отключен ли показ картинок в браузере
AJAX - кодировка
Очистить <INPUT> типа "file"?
Ajax и кнопка back
Выделение текста на всей странице с помощью яваскрипта
Как проверить существование переменной?
Проблема с KeyCode ShiftKey
Чередующиеся строки в таблице
Как сделать из таблицы зебру
Смена всего стиля страницы(стилевого файла) по нажатию на ссылку
Edited by s0rr0wLink to comment
Share on other sites
3 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.