Javascript.RU

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

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

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


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

Код галереи:
var images = [
     
       '1z.jpg',        
       '2z.png',        
       '3z.png',        
       '4z.png',        
       '5z.png',        
       '6z.png',        
       '7z.png',        
                  
    ];
     
    var num = 0;
    function next() {
    var slider = 
    document.getElementById('slider');
    num++;
    if(num >= images.length) {
    num = 0;
  }
    slider.src = images[num];
}

    function prev() {
    var slider = 
    document.getElementById('slider');
    num--;
    if (num < 0) {
    num = images.length-1;
  }
    slider.src = images[num];

Последний раз редактировалось Eva Savel, 23.02.2017 в 22:26.
Ответить с цитированием
  #2 (permalink)  
Старый 23.02.2017, 22:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077

Eva Savel,
маловато информации и не
Сообщение от Eva Savel
яву
а javascript ...
в чём проблема, сделайте кнопки
Сообщение от Eva Savel
"От руки", "Зарисовки"
которые будут менять массив с картинками images
Ответить с цитированием
  #3 (permalink)  
Старый 23.02.2017, 23:47
Аватар для Eva Savel
Новичок на форуме
Отправить личное сообщение для Eva Savel Посмотреть профиль Найти все сообщения от Eva Savel
 
Регистрация: 23.02.2017
Сообщений: 4

Подскажите, пожалуйста, как это правильно сделать?
Ответить с цитированием
  #4 (permalink)  
Старый 24.02.2017, 00:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077

Eva Savel,
попробуйте сделать минимальный html с css того что у вас на картинке.
Ответить с цитированием
  #5 (permalink)  
Старый 24.02.2017, 00:16
Аватар для Eva Savel
Новичок на форуме
Отправить личное сообщение для Eva Savel Посмотреть профиль Найти все сообщения от Eva Savel
 
Регистрация: 23.02.2017
Сообщений: 4

Я имела в виду, как прописать такой код кнопке?
Ответить с цитированием
  #6 (permalink)  
Старый 24.02.2017, 00:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077

Eva Savel,
4 кнопки наверно li в ul.menu , стрелки это наверно span.prev и span.next и картинка наверно img#slider --- поправьте если это не так, если это тайна, то помочь как-то затруднительно
Ответить с цитированием
  #7 (permalink)  
Старый 24.02.2017, 01:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077

галерея img на js со сменой тем
Eva Savel,
надеюсь разберётесь ...
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  span {
    margin: 8px
  }
  img {
    height: 300px;
  }
  li, span{
    cursor: pointer;
  }

  </style>

  <script>
   window.addEventListener('DOMContentLoaded', function() {
     var content = document.querySelector('.content'),
     pictures = {hand : ["http://www.greveniotis.gr/images/stories/logos/arthrografia1.jpg", "http://cdn01.ru/files/users/images/66/f8/66f81f19420a1351d38afdd67950ff24.jpg", "http://www.mikymauz.estranky.cz/img/portrait.1.1385066842.jpeg"],
     sketch : ["http://cs309317.vk.me/v309317608/1662/mGnqKzd2LJ8.jpg", "https://cdn2.f-cdn.com/contestentries/89046/11683392/53c7a04ad21b4_thumb.jpg"],
     artwork : [],
     certificate : []},
     arr = pictures.hand,
     img = document.querySelector('#slider'),
     index = 0,
     src;
     content.addEventListener("click", function(event) {
     var el = event.target;
     if ("LI" == el.tagName) {
     arr = pictures[el.dataset.arr];
     index = 0;
     }
     else if(el.classList.contains("prev")) index--;
     else if(el.classList.contains("next")) index++;
     if(index >= arr.length) index = 0;
     if(index < 0) index = arr.length-1;
     if(src=arr[index]) img.src = src;
     });
       });
  </script>
</head>

<body>
<div class="content">
<ul class="menu">
    <li data-arr="hand">От руки</li>
    <li data-arr="sketch" >Зарисовки</li>
    <li data-arr="artwork">3</li>
    <li data-arr="certificate">4</li>
</ul>
<img src="http://www.greveniotis.gr/images/stories/logos/arthrografia1.jpg" alt="" id="slider">
<span class="prev">prev</span><span class="next">next</span>
</div>

</body>
</html>
Ответить с цитированием
  #8 (permalink)  
Старый 24.02.2017, 15:48
Аватар для Eva Savel
Новичок на форуме
Отправить личное сообщение для Eva Savel Посмотреть профиль Найти все сообщения от Eva Savel
 
Регистрация: 23.02.2017
Сообщений: 4

Спасибо большое!
Немного переверстала все
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как создать цитатник? WGN Общие вопросы Javascript 10 29.01.2017 01:39
Как создать галерею с помощью jQuery MariyaIgorevna jQuery 4 02.03.2016 01:14
Как создать объект со своими условиями if jtag Общие вопросы Javascript 4 21.02.2016 13:12
Как создать Дата,время,открытие сайта Антон Internet Explorer 1 11.12.2008 22:44
как создать елемент с вложеными елементами scuter Events/DOM/Window 11 14.05.2008 16:15