Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Помогите новичку! (https://javascript.ru/forum/misc/59029-pomogite-novichku.html)

Пьяный копирайтер 22.10.2015 21:44

Помогите новичку!
 
Здравствуйте уважаемые хранители тайных знаний ордена JavaScript - седобородые старцы и недавно посвященные.
Обладая огромным желанием вступить в ряды рыцарей ордена, я получил множество теоретических знаний, и теперь пришло время приступить к их практической составляющей.
Пока что на своем пути я достиг только способности менять стили при наведении мыши. Камнем преткновения для меня встало создание простенького слайдера, в котором при нажатии на "следущее" и " предыдущее" менялись картинки.
Прошу вас написать сюда пример сего магического кода или хотя бы объяснить мне логику появления этих картинок. прошу вас использовать только возможности JS без использования магии JQuery.
Человек, который сможет доходчиво объяснить принцип действия, приобретет вселенское уважение и глубокое почитание с моей стороны а также будет воздвигнут в сан мудрейшего наставника.

EmperioAf 23.10.2015 10:46

http://dedushka.org/uroki/5914.html

Пьяный копирайтер 23.10.2015 11:05

а можно без JQuery? Вы поймите мне не для сайта нужно, а для понимания того как картинки будут сменять друг друга. нужно ли делать массив или хватит одной переменной. хотя бы пример кода в две строчки. без наворотов и доп. библиотек. как картинки сменять картинки при нажатии на кнопки или ссылки.все перерыл - везде этот вездесущий JQuery или анимация с наворотами.

laimas 23.10.2015 11:26

А сложно попросить Гугл найти уроки по данному вопросу?
На JS, на CSS

Напрягайте Гугл и изучайте

Пьяный копирайтер 23.10.2015 14:26

Цитата:

Сообщение от laimas (Сообщение 392903)
А сложно попросить Гугл найти уроки по данному вопросу?
На JS, на CSS

Напрягайте Гугл и изучайте

Спасибо конечно за совет, но если вы не знаете JavaScript или просто не хотите помочь, то зачем тогда напрягать себя и отвечать на сообщение. я же написал в начале что уже искал и в гугле и в яндексе но ничего не нашёл. я ж не прошу делать за меня мою работу, а всего лишь подсказать как работает слайдер на яваскрипте.

laimas 23.10.2015 14:29

Цитата:

Сообщение от Пьяный копирайтер
я ж не прошу делать за меня мою работу, а всего лишь подсказать как работает слайдер на яваскрипте.

По первой ссылке готовый код на JS, что вам мешает его изучать, благо что создание этого слайдера и описывается?

А что Гуглом по этому вопросу ничего не нашли, то это сомнительно, по данной теме информации хоть отбавляй, пересказывать ее лично вам здесь вряд ли кто станет.

Пьяный копирайтер 23.10.2015 14:39

Цитата:

Сообщение от laimas (Сообщение 392917)
По первой ссылке готовый код на JS, что вам мешает его изучать, благо что создание этого слайдера и описывается?

А что Гуглом по этому вопросу ничего не нашли, то это сомнительно, по данной теме информации хоть отбавляй, пересказывать ее лично вам здесь вряд ли кто станет.

ссылки которые вы мне написали я уже видел. и то что сделано там называется слайд-шоу, плюс еще и анимированное. я же просил помощи в создании слайдера. точнее даже не создании а просто объяснить каким образом появляются картинки ПРИ НАЖАТИИ НА КНОПКУ ВПЕРЕД И НАЗАД. т.е не нужно никаких шоу с наворотами. просто нажал на кнопку вперед загрузилась вторая картинка, нажал еще раз появилась третья и так далее. это не объясняется ни в одной книге и ни на одном сайте.

laimas 23.10.2015 14:56

Цитата:

Сообщение от Пьяный копирайтер
а просто объяснить каким образом появляются картинки ПРИ НАЖАТИИ НА КНОПКУ ВПЕРЕД И НАЗАД.


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

Все таки начните изучать код примера, а уж по конкретным "не понятно" с вопросами, тогда и конкретные ответы будут несомненно.

EmperioAf 23.10.2015 16:06

Цитата:

Сообщение от Пьяный копирайтер
объяснить каким образом появляются картинки ПРИ НАЖАТИИ НА КНОПКУ ВПЕРЕД И НАЗАД

упрощённо делается это следующим образом:
в блок размером скажем 100x100 помещается блок с размером количество картинок*100x100.
Внутри него помещается список (ul) в котором содержаться картинки.
в итоге видна снаружи только одна картинка. Далее делаются две абсолютно позиционнированные кнопки и по нажатию на кнопку можно у списка менять либо margin-left, либо сделать списку position: relative и менять left, либо вообще пользоваться трансформациями (лучше jQuery использовать для трансформаций)

Пьяный копирайтер 23.10.2015 21:37

Цитата:

Сообщение от EmperioAf (Сообщение 392934)
упрощённо делается это следующим образом:
в блок размером скажем 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.