Помогите новичку!
Здравствуйте уважаемые хранители тайных знаний ордена 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> |
Пьяный копирайтер,
:blink: Можно еще перекидывать,картинки из начала в конец и наоборот http://jsfiddle.net/2j2z0tu2/ Кстати советую почитать https://learn.javascript.ru |
:-? Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. <!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <script> function vpravo() { document.getElementById("test").style.marginTop= "-350px"; } function vlevo() { document.getElementById("test").style.marginTop= "0px"; } </script> </script> </head> <body> <div id="pic"> <ul id="test"> <li><img src="http://javascript.ru/forum/images/smilies/smile.gif" width="300" height="350"/></li> <li><img src="http://javascript.ru/forum/images/smilies/unsure.gif" 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; } ul{ margin: 0; padding: 0; transition: all 1s ease-in-out; } #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> </body> </html> |
разбираться в чужом коде это неблагодарная работа, поэтому мне проще написать свой:
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>ГГ</title> <style> * { margin:0; padding: 0; outline: none; } .headersliderleftclick { position: absolute; top: 230px; left: -210px; width: 115px; height: 115px; background: url(http://www.jpeghost.ru/i/1272282284_2701_r7j/10_zb3.png); cursor: pointer; opacity: 0.6; } .headerslider { box-sizing: border-box; margin: 0 20px; position: relative; width: 560px; height: 500px; margin-left: 200px; } .headeroneslide { position: relative; width: 566px; height: 339px; top: 100px; left: 0; overflow: hidden; } .headersliderholder { box-sizing: border-box; position: relative; left: 0; transition: all 1s ease; width: 1698px; height: 339px; } .headerslide { float: left; box-sizing: border-box; width: 566px; height: 339px; background-repeat: no-repeat; background-size: 573px 100%; } .first { background-image: url(http://talklove.ru/priroda/priroda-7.jpg); } .second { background-image: url(http://www.svoiludi.ru/images/tb/9844/priroda-i-vina-patagonii-tur-13724291688487_w990h700.jpg); } .third { background-image: url(http://svet-vnutri.ru/wp-content/uploads/2014/03/68074.jpg); } .headerslide div { width: 100%; float: left; height: 109px; margin-left: 0; margin-top: 0; background: rgba(20, 20, 20, 0.69); margin-top: 230px; padding-left: 22px; padding-right: 20px; box-sizing: border-box; padding-top: 10px; } .headslidetext h1 { font-size: 26px; color: white; letter-spacing: -1px; } .headslidetext p { font-size: 13px; color: white; } .headersliderrightclick { position: absolute; top: 230px; left: 666px; width: 115px; height: 115px; background: url(http://www.jpeghost.ru/i/1272282284_2701_r7j/06_o9f.png); background-position: 100% 50%; cursor: pointer; } </style> </head> <body> <div class="headerslider"> <div class="headersliderleftclick"></div> <div class="headeroneslide"> <div class="headersliderholder" number='1'> <div class="headerslide first"> <div class="headslidetext"> <h1>название акции</h1> <p>Равным образом постоянное информационно-пропагандистское обеспечение нашей деятельности представляет</p> </div> </div> <div class="headerslide second"> <div class="headslidetext"> <h1>название акции 2</h1> <p>Равным образом постоянное информационно-пропагандистское обеспечение нашей деятельности представляет</p> </div> </div> <div class="headerslide third"> <div class="headslidetext"> <h1>название акции 3</h1> <p>Равным образом постоянное информационно-пропагандистское обеспечение нашей деятельности представляет</p> </div> </div> </div> </div> <div class="headersliderrightclick"></div> </div> <script> function slider() { var leftClick = document.querySelector('.headersliderleftclick'); var rightClick = document.querySelector('.headersliderrightclick'); leftClick.onclick = function() { var headerSliderHolder = document.querySelector('.headersliderholder'); var headerSliderHolderValue = headerSliderHolder.getAttribute('number'); if (headerSliderHolderValue == 1) return; var headerSliderHolderStyle = getComputedStyle(headerSliderHolder); if (headerSliderHolderValue > 1) { console.log(headerSliderHolderValue); if (+headerSliderHolderValue === 3) rightClick.style.opacity = '1'; if (+headerSliderHolderValue === 2) { leftClick.style.opacity = '0.6'; } headerSliderHolder.setAttribute('number', +headerSliderHolderValue - 1 + ''); headerSliderHolder.style.left = parseInt(headerSliderHolderStyle.left) + 566 + 'px'; } } rightClick.onclick = function() { var headerSliderHolder = document.querySelector('.headersliderholder'); var headerSliderHolderValue = headerSliderHolder.getAttribute('number'); if (headerSliderHolderValue == 3) return; var headerSliderHolderStyle = getComputedStyle(headerSliderHolder); if (headerSliderHolderValue < 3) { if (+headerSliderHolderValue === 1) leftClick.style.opacity = '1'; if (+headerSliderHolderValue === 2) { rightClick.style.opacity = '0.6'; } headerSliderHolder.setAttribute('number', +headerSliderHolderValue + 1 + ''); headerSliderHolder.style.left = parseInt(headerSliderHolderStyle.left) - 566 + 'px'; } } } slider(); </script> </body> </html> |
Цитата:
|
Цитата:
Цитата:
|
Часовой пояс GMT +3, время: 20:59. |