Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как доработать скрипт? (https://javascript.ru/forum/dom-window/79511-kak-dorabotat-skript.html)

LADYX 18.02.2020 11:49

Как доработать скрипт?
 
Здравствуйте. Помогите, пожалуйста, дописать функцию, чтобы кроме нажатия вперед/назад (навигации) слайдер мог и автоматически переключаться. Спасибо!
<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]

рони 18.02.2020 12:28

LADYX,
https://javascript.ru/forum/dom-wind...tml#post430374

LADYX 18.02.2020 19:12

рони,
да мне хотелось бы именно мой доработать.

рони 18.02.2020 20:02

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>

LADYX 18.02.2020 22:17

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


Часовой пояс GMT +3, время: 07:11.