Помогите новичку!
Здравствуйте уважаемые хранители тайных знаний ордена JavaScript - седобородые старцы и недавно посвященные.
Обладая огромным желанием вступить в ряды рыцарей ордена, я получил множество теоретических знаний, и теперь пришло время приступить к их практической составляющей. Пока что на своем пути я достиг только способности менять стили при наведении мыши. Камнем преткновения для меня встало создание простенького слайдера, в котором при нажатии на "следущее" и " предыдущее" менялись картинки. Прошу вас написать сюда пример сего магического кода или хотя бы объяснить мне логику появления этих картинок. прошу вас использовать только возможности JS без использования магии JQuery. Человек, который сможет доходчиво объяснить принцип действия, приобретет вселенское уважение и глубокое почитание с моей стороны а также будет воздвигнут в сан мудрейшего наставника. |
|
а можно без JQuery? Вы поймите мне не для сайта нужно, а для понимания того как картинки будут сменять друг друга. нужно ли делать массив или хватит одной переменной. хотя бы пример кода в две строчки. без наворотов и доп. библиотек. как картинки сменять картинки при нажатии на кнопки или ссылки.все перерыл - везде этот вездесущий JQuery или анимация с наворотами.
|
|
Спасибо конечно за совет, но если вы не знаете JavaScript или просто не хотите помочь, то зачем тогда напрягать себя и отвечать на сообщение. я же написал в начале что уже искал и в гугле и в яндексе но ничего не нашёл. я ж не прошу делать за меня мою работу, а всего лишь подсказать как работает слайдер на яваскрипте.
|
Цитата:
А что Гуглом по этому вопросу ничего не нашли, то это сомнительно, по данной теме информации хоть отбавляй, пересказывать ее лично вам здесь вряд ли кто станет. |
Цитата:
|
Цитата:
Так вы в код заглядывайте, ответ на это есть и по ссылке, которая вам по каким-то причинам не годится. А как появляются, это уже вопрос десятый, ибо можно менять прозрачность, можно сдвигать, можно накладывать поверху и увеличивать, можно ... и т.д. куча приемов. Все таки начните изучать код примера, а уж по конкретным "не понятно" с вопросами, тогда и конкретные ответы будут несомненно. |
Цитата:
в блок размером скажем 100x100 помещается блок с размером количество картинок*100x100. Внутри него помещается список (ul) в котором содержаться картинки. в итоге видна снаружи только одна картинка. Далее делаются две абсолютно позиционнированные кнопки и по нажатию на кнопку можно у списка менять либо margin-left, либо сделать списку position: relative и менять left, либо вообще пользоваться трансформациями (лучше jQuery использовать для трансформаций) |
Цитата:
Посмотри пожалуйста код. Вроде все сделал как ты написал. но ничего не работает. function vpravo() { document.getElementById("ul").style.marginTop= "-350px"; } function vlevo() { document.getElementById("ul").style.marginTop= "350px"; } </script> </head> <body> <div id="pic"> <ul id=""> <li><img src="images/1.jpg" width="300" height="350"/></li> <li><img src="images/2.jpg" width="300" height="350"/></li> <li><img src="images/3.jpg" width="300" height="350"/></li> <li><img src="images/4.jpg" width="300" height="350"/></li> <li><img src="images/6.jpg" width="300" height="350"/></li> </ul> </div> <style> #pic { outline: 1px solid black; height: 350px; width: 300px; overflow: hidden; } #pic li { outline: 1px solid black; height: 350px; width: 300px; list-style: none; } </style> <button type="button" onclick="vlevo">Влево</button> <button type="button" onclick="vpravo">Вправо</button> |
Часовой пояс GMT +3, время: 01:28. |