Javascript.RU

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

Как доработать скрипт?
Здравствуйте. Помогите, пожалуйста, дописать функцию, чтобы кроме нажатия вперед/назад (навигации) слайдер мог и автоматически переключаться. Спасибо!
<style>
#slider {
  position: relative;
  overflow: hidden;
  width: 400px;
  height: 200px;
  margin-bottom: 10px;
}

#items img {
  float: left;
  width: 400px;
  height: 200px;
}
</style>
<div id="slider">
  <div id="items">
    <img src="https://cdn.jdpower.com/Models/400x200/2018-McLaren-570S.jpg" />
    <img src="https://cdn.iseecars.com/image2/w450/16564.jpg" />
    <img src="https://www.theautochannel.com/db/as_images/17876.jpg" />
    <img src="https://www.rrtuningclub.ru/media/k2/items/cache/d6c28c6582af8287b0eef478e4a8f548_M.jpg" />
  </div>
</div>
<button id="prev">Назад</button>
<button id="next">Вперед</button>
[JS]
var count_elements = 4,
  current_element = 0,
  width = 400,
  height = 200,
  duration = 500;
var screen = $('#items');
screen.width(width * count_elements);
function move_screen(x) {
  current_element = (current_element + x) % count_elements;
  if (current_element < 0) {
    current_element += count_elements;
  }
  //console.log(current_element);
  screen.animate({
    marginLeft: -width * current_element
  }, duration);
}
$("#prev").click(function() {
  move_screen(-1);
})
$("#next").click(function() {
  move_screen(1);
})
[/JS]
Ответить с цитированием
  #2 (permalink)  
Старый 18.02.2020, 12:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

LADYX,
https://javascript.ru/forum/dom-wind...tml#post430374
Ответить с цитированием
  #3 (permalink)  
Старый 18.02.2020, 19:12
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 217

рони,
да мне хотелось бы именно мой доработать.
Ответить с цитированием
  #4 (permalink)  
Старый 18.02.2020, 20:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

LADYX,
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .act{
      background-color: rgba(255, 0, 0, 1);
      color: rgba(255, 255, 255, 1);
  }

  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <script>
$(function() {
var count_elements = 4,
  current_element = 0,
  width = 400,
  height = 200,
  duration = 500,
  pause = 1800,
  auto = false;
var screen = $('#items');
screen.width(width * count_elements);
function move_screen(x) {
  current_element = (current_element + x + count_elements) % count_elements;
  var time = auto ? pause : 0;
  screen.delay(time).animate({
    marginLeft: -width * current_element
  }, duration, function() {
if(auto) move_screen(x);
});
}
$("#prev").click(function() {
  auto = false;
  move_screen(-1);
  $("#auto").toggleClass("act", auto);
})
$("#next").click(function() {
  auto = false;
  move_screen(1);
  $("#auto").toggleClass("act", auto);
})
$("#auto").click(function() {
  auto = !auto;
  auto ? move_screen(1) : screen.stop();
 $("#auto").toggleClass("act", auto);
})

});
  </script>
</head>
<body>
<style>
#slider {
  position: relative;
  overflow: hidden;
  width: 400px;
  height: 200px;
  margin-bottom: 10px;
}

#items img {
  float: left;
  width: 400px;
  height: 200px;
}
</style>
<div id="slider">
  <div id="items">
    <img src="https://cdn.jdpower.com/Models/400x200/2018-McLaren-570S.jpg" />
    <img src="https://cdn.iseecars.com/image2/w450/16564.jpg" />
    <img src="https://www.theautochannel.com/db/as_images/17876.jpg" />
    <img src="https://www.rrtuningclub.ru/media/k2/items/cache/d6c28c6582af8287b0eef478e4a8f548_M.jpg" />
  </div>
</div>
<button id="prev">Назад</button>
<button id="next">Вперед</button>
<button id="auto">Авто</button>
</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 18.02.2020, 22:17
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 217

рони,
приогромнейшее спасибо!! Очень классно!!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать задержку отображения, пока не отработает скрипт? snovapavel jQuery 3 04.12.2016 07:13
Как правильно внести изменения в скрипт таймера обратного отсчета времени? LADYX Элементы интерфейса 2 26.07.2016 22:25
Не получается доработать скрипт калькулятора последнего дня отпуска insider999 Общие вопросы Javascript 15 22.07.2016 15:35
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
Аккордеон меню, как доработать код. Gawk Общие вопросы Javascript 1 23.07.2012 13:01