Простейший скрипт слайдера

@Disaine · Регистрация: 08.03.2017

Студворк — интернет-сервис помощи студентам

ПОМОГИТЕ, ПОЖАЛУЙСТА!!! Помогите мне изменить скрипт. class="left-pointer" и class="Right-pointer" это кнопки, их надо привязать к скрипту. Надо также убрать у слайдера авто-проигрывание.

JavaScript
1
2
3
4
5
6
7
8
var slides = document.querySelectorAll('#WindowsSlide .SlideBlock');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,1000);
function nextSlide() {
slides[currentSlide].className = 'SlideBlock';
currentSlide = (currentSlide+1)%slides.length;
slides[currentSlide].className = 'SlideBlock showing';
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
                                 <li class="SlideBlock showing">
                                                    <div class="row" style="margin-top: 130%; color: white; position: absolute;">
                                                        <div class="col-md-4 col-xs-4 col-sm-4 col-lg-4 left-pointer" style="background: yellowgreen; cursor: pointer;">LEFT</div>
                                                        <div class="col-md-4 col-xs-4 col-sm-4 col-lg-4" style="left: 44%;">A001</div>
                                                        <div class="col-md-4 col-xs-4 col-sm-4 col-lg-4 Right-pointer" style="left: 83%; background: yellowgreen; cursor: pointer;">RIGTH</div>
                                                    </div>
                                                    <img class="img-door-two" class="img-rounded" src="https://www.cyberforum.ru/images/DoorWoodPrestigePicture/1.jpg" style="height: 503px">
                                                </li>
 
                                                <li class="SlideBlock">
                                                    <div class="row" style="margin-top: 130%; color: white; position: absolute;">
                                                        <div class="col-md-4 col-xs-4 col-sm-4 col-lg-4 left-pointer" style="background: yellowgreen; cursor: pointer;">LEFT</div>
                                                        <div class="col-md-4 col-xs-4 col-sm-4 col-lg-4" style="left: 44%;">A001</div>
                                                        <div class="col-md-4 col-xs-4 col-sm-4 col-lg-4 Right-pointer" style="left: 83%; background: yellowgreen; cursor: pointer;">RIGTH</div>
                                                    </div>
                                                    <img class="img-door-two" class="img-rounded" src="https://www.cyberforum.ru/images/DoorWoodPrestigePicture/2.jpg" style="height: 503px">
                                                </li>

@MrOnlineCoder · 05.10.2017, 17:27

Сообщение от Disaine

авто-проигрывание.

Удалите 3 строку:

JavaScript
1
var slideInterval = setInterval(nextSlide,1000);

Сообщение от Disaine

Помогите мне изменить скрипт. class="left-pointer" и class="Right-pointer"

JavaScript
1
2
3
4
5
6
7
8
9
10
11
function nextSlide() {
  slides[currentSlide].className = 'SlideBlock';
  currentSlide = (currentSlide+1)%slides.length;
  slides[currentSlide].className = 'SlideBlock showing';
}
 
function prevSlide() {
  slides[currentSlide].className = 'SlideBlock';
  currentSlide = (currentSlide-1)%slides.length;
  slides[currentSlide].className = 'SlideBlock showing';
}

Соответственно на left-pointer ставите обработчик клика на вызов prevSlide(), а right-pointer - nextSlide()

@Disaine · 06.10.2017, 15:12 **[ТС]**

Сообщение от MrOnlineCoder

Соответственно на left-pointer ставите обработчик клика на вызов prevSlide(), а right-pointer - nextSlide()

Простите, я туплю. А как это сделать?

@MrOnlineCoder · 06.10.2017, 17:49

Disaine,

JavaScript
1
2
3
<div class="col-md-4 col-xs-4 col-sm-4 col-lg-4 left-pointer" onclick="prevSlide()" style="background: yellowgreen; cursor: pointer;">LEFT</div>
 
<div class="col-md-4 col-xs-4 col-sm-4 col-lg-4 Right-pointer" onclick="nextSlide()" style="left: 83%; background: yellowgreen; cursor: pointer;">RIGTH</div>

@Disaine · 06.10.2017, 18:10 **[ТС]**

Я неправильно вопрос задал. Извините. Как мне сделать так, чтобы при нажатии на right скрипт менял картинку. Здесь это устроено так, что при нажатии на кнопку один блок скрывается, а другой показывается. Но почему-то не работает.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
function nextSlide() {
  slides[currentSlide].className = 'SlideBlock';
  currentSlide = (currentSlide+1)%slides.length;
  slides[currentSlide].className = 'SlideBlock showing';
}
 
function prevSlide() {
  slides[currentSlide].className = 'SlideBlock';
  currentSlide = (currentSlide-1)%slides.length;
  slides[currentSlide].className = 'SlideBlock showing';
}

HTML5
1
2
3
4
5
<li class="SlideBlock2 showing"><div class="row" style="margin-top: 130%; color: white; position: absolute;"><div class="col-md-4 col-xs-4 col-sm-4 col-lg-4 left-pointer" onclick="prevSlide()" style="background: yellowgreen; cursor: pointer;">LEFT</div><div class="col-md-4 col-xs-4 col-sm-4 col-lg-4" style="left: 44%;">A001</div><div class="col-md-4 col-xs-4 col-sm-4 col-lg-4 Right-pointer" onclick="nextSlide()" style="left: 83%; background: yellowgreen; cursor: pointer;">RIGTH</div></div><img class="img-door-two" class="img-rounded" src="https://www.cyberforum.ru/images/DoorWoodPrestigePhoto/A001.jpg" style="height: 503px"></li>   
 
<li class="SlideBlock2"><div class="row" style="margin-top: 130%; color: white; position: absolute;"><div class="col-md-4 col-xs-4 col-sm-4 col-lg-4 left-pointer" onclick="prevSlide()" style="background: yellowgreen; cursor: pointer;">LEFT</div><div class="col-md-4 col-xs-4 col-sm-4 col-lg-4" style="left: 44%;">A002</div><div class="col-md-4 col-xs-4 col-sm-4 col-lg-4 Right-pointer" onclick="nextSlide()" style="left: 83%; background: yellowgreen; cursor: pointer;">RIGTH</div></div><img class="img-door-two" class="img-rounded" src="https://www.cyberforum.ru/images/DoorWoodPrestigePhoto/A002.jpg" style="height: 503px"></li>   
 
<li class="SlideBlock2"><div class="row" style="margin-top: 130%; color: white; position: absolute;"><div class="col-md-4 col-xs-4 col-sm-4 col-lg-4 left-pointer" onclick="prevSlide()" style="background: yellowgreen; cursor: pointer;">LEFT</div><div class="col-md-4 col-xs-4 col-sm-4 col-lg-4" style="left: 44%;">A003</div><div class="col-md-4 col-xs-4 col-sm-4 col-lg-4 Right-pointer" onclick="nextSlide()" style="left: 83%; background: yellowgreen; cursor: pointer;">RIGTH</div></div><img class="img-door-two" class="img-rounded" src="https://www.cyberforum.ru/images/DoorWoodPrestigePhoto/A003.jpg" style="height: 503px"></li>

@Disaine · 10.10.2017, 16:37 **[ТС]**

У меня ошибка в консоли выходит.

Что мне с этим делать? Код ниже будет

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var slides = document.querySelectorAll('#WindowsSlide .SlideBlock');
var currentSlide = 0;
 
function nextSlide() {
  slides[currentSlide].className = 'SlideBlock';
  currentSlide = (currentSlide+1)%slides.length;
  slides[currentSlide].className = 'SlideBlock showing';
}
 
function prevSlide() {
  slides[currentSlide].className = 'SlideBlock';
  currentSlide = (currentSlide-1)%slides.length;
  slides[currentSlide].className = 'SlideBlock showing';
}

Новые блоги и статьи Все статьи Все блоги /
Контроль корректности заполнения дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

Простейший скрипт слайдера

Решение