Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.10.2015, 22:44
Интересующийся
Отправить личное сообщение для Пьяный копирайтер Посмотреть профиль Найти все сообщения от Пьяный копирайтер
 
Регистрация: 07.02.2015
Сообщений: 12

Помогите новичку!
Здравствуйте уважаемые хранители тайных знаний ордена JavaScript - седобородые старцы и недавно посвященные.
Обладая огромным желанием вступить в ряды рыцарей ордена, я получил множество теоретических знаний, и теперь пришло время приступить к их практической составляющей.
Пока что на своем пути я достиг только способности менять стили при наведении мыши. Камнем преткновения для меня встало создание простенького слайдера, в котором при нажатии на "следущее" и " предыдущее" менялись картинки.
Прошу вас написать сюда пример сего магического кода или хотя бы объяснить мне логику появления этих картинок. прошу вас использовать только возможности JS без использования магии JQuery.
Человек, который сможет доходчиво объяснить принцип действия, приобретет вселенское уважение и глубокое почитание с моей стороны а также будет воздвигнут в сан мудрейшего наставника.
Ответить с цитированием
  #2 (permalink)  
Старый 23.10.2015, 11:46
Аватар для EmperioAf
Профессор
Отправить личное сообщение для EmperioAf Посмотреть профиль Найти все сообщения от EmperioAf
 
Регистрация: 15.01.2015
Сообщений: 622

http://dedushka.org/uroki/5914.html
Ответить с цитированием
  #3 (permalink)  
Старый 23.10.2015, 12:05
Интересующийся
Отправить личное сообщение для Пьяный копирайтер Посмотреть профиль Найти все сообщения от Пьяный копирайтер
 
Регистрация: 07.02.2015
Сообщений: 12

а можно без JQuery? Вы поймите мне не для сайта нужно, а для понимания того как картинки будут сменять друг друга. нужно ли делать массив или хватит одной переменной. хотя бы пример кода в две строчки. без наворотов и доп. библиотек. как картинки сменять картинки при нажатии на кнопки или ссылки.все перерыл - везде этот вездесущий JQuery или анимация с наворотами.
Ответить с цитированием
  #4 (permalink)  
Старый 23.10.2015, 12:26
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

Напрягайте Гугл и изучайте
Ответить с цитированием
  #5 (permalink)  
Старый 23.10.2015, 15:26
Интересующийся
Отправить личное сообщение для Пьяный копирайтер Посмотреть профиль Найти все сообщения от Пьяный копирайтер
 
Регистрация: 07.02.2015
Сообщений: 12

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

Напрягайте Гугл и изучайте
Спасибо конечно за совет, но если вы не знаете JavaScript или просто не хотите помочь, то зачем тогда напрягать себя и отвечать на сообщение. я же написал в начале что уже искал и в гугле и в яндексе но ничего не нашёл. я ж не прошу делать за меня мою работу, а всего лишь подсказать как работает слайдер на яваскрипте.
Ответить с цитированием
  #6 (permalink)  
Старый 23.10.2015, 15:29
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

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

Последний раз редактировалось laimas, 23.10.2015 в 15:31.
Ответить с цитированием
  #7 (permalink)  
Старый 23.10.2015, 15:39
Интересующийся
Отправить личное сообщение для Пьяный копирайтер Посмотреть профиль Найти все сообщения от Пьяный копирайтер
 
Регистрация: 07.02.2015
Сообщений: 12

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

А что Гуглом по этому вопросу ничего не нашли, то это сомнительно, по данной теме информации хоть отбавляй, пересказывать ее лично вам здесь вряд ли кто станет.
ссылки которые вы мне написали я уже видел. и то что сделано там называется слайд-шоу, плюс еще и анимированное. я же просил помощи в создании слайдера. точнее даже не создании а просто объяснить каким образом появляются картинки ПРИ НАЖАТИИ НА КНОПКУ ВПЕРЕД И НАЗАД. т.е не нужно никаких шоу с наворотами. просто нажал на кнопку вперед загрузилась вторая картинка, нажал еще раз появилась третья и так далее. это не объясняется ни в одной книге и ни на одном сайте.
Ответить с цитированием
  #8 (permalink)  
Старый 23.10.2015, 15:56
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

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

Все таки начните изучать код примера, а уж по конкретным "не понятно" с вопросами, тогда и конкретные ответы будут несомненно.
Ответить с цитированием
  #9 (permalink)  
Старый 23.10.2015, 17:06
Аватар для EmperioAf
Профессор
Отправить личное сообщение для EmperioAf Посмотреть профиль Найти все сообщения от EmperioAf
 
Регистрация: 15.01.2015
Сообщений: 622

Сообщение от Пьяный копирайтер
объяснить каким образом появляются картинки ПРИ НАЖАТИИ НА КНОПКУ ВПЕРЕД И НАЗАД
упрощённо делается это следующим образом:
в блок размером скажем 100x100 помещается блок с размером количество картинок*100x100.
Внутри него помещается список (ul) в котором содержаться картинки.
в итоге видна снаружи только одна картинка. Далее делаются две абсолютно позиционнированные кнопки и по нажатию на кнопку можно у списка менять либо margin-left, либо сделать списку position: relative и менять left, либо вообще пользоваться трансформациями (лучше jQuery использовать для трансформаций)
Ответить с цитированием
  #10 (permalink)  
Старый 23.10.2015, 22:37
Интересующийся
Отправить личное сообщение для Пьяный копирайтер Посмотреть профиль Найти все сообщения от Пьяный копирайтер
 
Регистрация: 07.02.2015
Сообщений: 12

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

Последний раз редактировалось Пьяный копирайтер, 24.10.2015 в 09:01.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите плис новичку в ajax urel AJAX и COMET 6 12.01.2013 20:36
Помогите новичку! Анатолий Саратовцев Events/DOM/Window 7 04.08.2012 17:46
помогите новичку с поиском! real-man AJAX и COMET 8 12.06.2011 14:07
Выезжающая картинка. помогите плз новичку(( animus Элементы интерфейса 4 22.04.2011 14:31
Помогите новичку с выпадающим списком interest Элементы интерфейса 5 19.05.2010 13:15