Javascript.RU

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

Да, к сожалению трудно. Если не было так трудно, не просила бы помощи. И я попросила помощи и помочь найти ошибку и указать на нее, а не слушать, что там ошибка. В случае отсутствия ошибки все бы работало. На том сайте часть классов идет со знаками доллара. Даже скопировав все так как есть в трех файлах, оно не заработало. Я этим занимаюсь месяц и мне сложно понять работу скрипта.
Ответить с цитированием
  #12 (permalink)  
Старый 10.07.2017, 09:59
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Сообщение от amigru
я попросила помощи и помочь найти ошибку и указать на нее, а не слушать, что там ошибка
Ну так перечислять то .... функция next.onclick=function () { не закрыта, нет закрывающий фигурной скобки. Но это может быть и ошибка при копировании. Кстати код нужно форматировать - все что вложено в функцию нужно писать с отступом, иначе ведь код читать сложно.

Потом как вы пытаетесь получить кнопки управления? Они у вас с классами "prev" и "next", а вы хотите достучаться к ним по селекторам querySelector('.prev .diy-slideshow') и querySelector('.next .diy-slideshow') соответственно, а это означает найти в элементах классов "prev" и "next" элементы с классом "diy-slideshow". Ну разве такие есть у вас? Параметры методов querySelector/querySelectorAll описываются согласно CSS селекторам, надо было просто прочесть об этом. Ничего сложного в этом нет. Есть символы, которые нельзя как есть вставлять в HTML, это < > &, иначе могут быть неприятности, их обязательно заменяют html-сущностями.

Но самое главное, это не понять чего же вам надо? Если вам дали ссылку, то для чего - разрешено списать код заменив слегка имена переменных или руководствуясь кодом написать свое?

Ну если свое, то можно и так написать:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
figure {
    width: 400px;
    background-color: #000;
    text-align: center;
    padding: 15px;
    margin: 0 auto 5px auto;
    color: #fff;
}

figure:not(.show) {
    display: none;
}

figure img {
    height: 200px;
    width: auto;
}

.control {
    width: 430px;
    margin: 0 auto;
}

.control span {
    font-size: 1.5em;
    cursor: pointer;
}

.control span:last-child {
    float: right;
}
</style>
</head>
<body>
<div class="diy-slideshow">
    <figure class="show">
        <img src="https://cdn.pixabay.com/photo/2017/06/21/13/37/lizard-2427248__340.jpg"><div class="description">Tortoise in the sea</div>
    </figure>
    <figure>
        <img src="https://cdn.pixabay.com/photo/2017/06/26/12/49/red-wine-2443699__340.jpg"><div class="description">Seashells</div>
    </figure>
    <figure>
        <img src="https://cdn.pixabay.com/photo/2017/06/24/23/03/railway-2439189__340.jpg"><div class="description">Beatiful beach</div>
    </figure>
    <figure>
        <img src="https://cdn.pixabay.com/photo/2017/06/30/21/28/sunset-2459855__340.jpg"><div class="description">Wonderful sunrice</div>
    </figure>
    <figure>
        <img src="https://cdn.pixabay.com/photo/2017/06/24/23/41/beer-2439237__340.jpg"><div class="description">Quay</div>
    </figure>
    <figure>
        <img src="https://cdn.pixabay.com/photo/2016/03/09/15/29/eagle-1246681__340.jpg"><div class="description">Amazing sunrice on the lake</div>
    </figure>
</div>
<div class="control">
    <span data-direct="-1">«</span>
    <span data-direct="1">»</span>
</div>
<script>
var counter = 0,
    items = document.querySelectorAll('.diy-slideshow figure');

[].forEach.call(document.querySelectorAll('div.control span'), function(e) {
    e.addEventListener('click', function() {
        items[counter].classList.remove('show');
        counter += +this.getAttribute('data-direct');
        counter = counter < 0 ? items.length - 1 : counter == items.length ? 0 : counter;
        items[counter].classList.add('show');
    }, false);
});
</script>
</body>
</html>


Мадам, вы студент, значит надо учиться или вам задают то, чего в программе обучения вообще нет?

Последний раз редактировалось laimas, 10.07.2017 в 10:03.
Ответить с цитированием
  #13 (permalink)  
Старый 10.07.2017, 10:39
Аватар для amigru
Новичок на форуме
Отправить личное сообщение для amigru Посмотреть профиль Найти все сообщения от amigru
 
Регистрация: 09.07.2017
Сообщений: 4

Спасибо огромное! Вечером попытаюсь разобраться. Программу прохожу по вебинару,html,css объяснили (так, что остальное смогла понять через интернет), а вот JS объяснили плохо. А проект дали: создать свою веб страницу (внутри еще 5 страниц). Одна страница вообще неполучилась (разницу между removeListener и switch непонятна (нужно чтобы в случае когда мышка на объекте менялся текст на другой,а вслучае когда ее там нет оставался текст который изначально и это требуеться сделать именно через JS, хоть через CSS это у меня получается) надеюсь препод не забьет и объяснит хоть когда-нибудь). .

В ссылке которую дали, функции которых вообще не было на курсе.

А остальное пыталась понять через обучалку https://www.youtube.com/watch?v=-2WiaSvOj78&t=4842s

В итоге у меня куча картинок вертикально.

Если бы с той ссылки все работало как надо, то я бы была рада. С кодом по ссылке в console.log подсвечивает красным после второй функции красным, пишет что такой функции нет (это я напоминаю,я скопировала все прямиком с сайта). На W3 сайте слайдеры вообще не понятные для моего разума. Спасибо еще раз.
Ответить с цитированием
  #14 (permalink)  
Старый 10.07.2017, 10:49
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

amigru,
хотите научится вязать спицами (если не можете)? Тогда можно смотреть мультики на ютюбе. А изучать веб аспекты программирования лучше по книгам хорошим или в "твердом переплете" (если прилагаются CD с примерами/проектами вообще шик), или онлайн:

https://developer.mozilla.org/ru/
https://developer.mozilla.org/ru/docs/Learn
https://developer.mozilla.org/ru/doc...d_with_the_web
https://developer.mozilla.org/ru/docs/Learn/HTML
https://developer.mozilla.org/ru/docs/Learn/CSS
https://developer.mozilla.org/ru/docs/Learn/JavaScript

Учебник по JS есть и на форуме, не полный конечно, но и "не сухим языком" написан.
Ответить с цитированием
  #15 (permalink)  
Старый 10.07.2017, 22:07
Аватар для amigru
Новичок на форуме
Отправить личное сообщение для amigru Посмотреть профиль Найти все сообщения от amigru
 
Регистрация: 09.07.2017
Сообщений: 4

Я нашла причину своих неудачь. Код скрипта был в начале, причем в head (остальные страницы работают так ), а не в конце перед /body, поняла это по командам в console.log.
Насчет querySelector и взаимодействий с CSS на курсе не было сказано,спасибо за разъяснение. На курсе также плохо объяснили способ external, так как показывали только internal. Еще раз спасибо за помощь, буду дальше разбираться с addListener
Ответить с цитированием
  #16 (permalink)  
Старый 10.07.2017, 23:35
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Сообщение от amigru
Код скрипта был в начале, причем в head (остальные страницы работают так ), а не в конце перед /body
Можно его в head разместить, но только работать он должен начинать тогда, когда будет загружена страница, готов DOM, то есть в обработчике этого события.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как сделать проверку полей на js boris2000 Элементы интерфейса 12 18.11.2014 12:15
Как сделать выполнение одного JS после выполнения другого vita1ii Events/DOM/Window 2 11.01.2013 18:52
Как сделать как в JQ? faforty Общие вопросы Javascript 8 14.11.2011 01:35
JS классы - как объединить функции в класс olga153b Events/DOM/Window 3 01.11.2011 14:13
Как написать свой чат mycoding Оффтопик 2 14.08.2010 21:51