Автоматически переключаться между диапазонами

Я не могу найти ответы, которые допускают sentence here, за которым следует end word

Идея состоит в том, что у меня будет список элементов в промежутках, а затем я буду переключаться между ними, поэтому начало предложения будет таким же, а изменится только конец. В идеале должна быть какая-то анимация, но даже просто функциональность приветствуется.

<p class = "itemlist">We sell
    <span class = "items">
      <span>Bread</span>
      <span>Milk</span>
      <span>Fish</span>
      <span>Eggs</span>
      <span>Cheese</span>
    </span>
  </p>

В идеале я хотел бы, чтобы он показывал один элемент за раз. Конечный результат будет выглядеть как GIF ниже, но текст должен оставаться на том же месте.

Гиф намерения.

Любые подсказки/ответы будут очень признательны. Я рву на себе волосы два часа из-за этого.

Заранее спасибо.

это, вероятно, изображение, вставленное в текст, и карусель, изменяющий изображение. - сделайте это, но сделайте это автоматически - w3schools.com/bootstrap/bootstrap_carousel.asp

— 22.05.2019 23:45

javascript html css

22.05.2019 23:31

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 7

Ответ принят как подходящий

Вот пример использования setInterval

let i=0;
const items = Array.from(document.querySelectorAll('.items span'));

const showNewItem = (index) => {
  items.forEach(i => i.style.display = 'none');
  
  items[index].style.display = 'inline';
}

// Initial call
showNewItem(i++);

setInterval(() => {
  showNewItem(i++);
  if (i > items.length-1) i = 0;
},1000);

<p class = "itemlist">We sell
    <span class = "items">
      <span>Bread</span>
      <span>Milk</span>
      <span>Fish</span>
      <span>Eggs</span>
      <span>Cheese</span>
    </span>
  </p>

document.querySelectorAll принимает forEach, нет необходимости использовать Array.from(document.querySelectorAll ..

— 23.05.2019 00:16

@MisterJojo да, я не был уверен, что это так length

— 23.05.2019 00:19

22.05.2019 23:43

да setInterval это ключ [править] текст теперь центрирован

const All_span = document.querySelectorAll('p.itemlist span.items span');
var NoSpan = 0;

setInterval(() => {
    All_span[NoSpan++].style.display = 'none';
    NoSpan %= All_span.length;
    All_span[NoSpan].style.display = 'inline';
}, 900);

p.itemlist {
	font: 2em Verdana, Geneva, Arial, Helvetica, sans-serif;
	display: block;
	width: 8em;
	text-align: center;
}
p.itemlist span.items span {
	display: none;
	color:crimson;
}
p.itemlist span.items span:first-child {
    display: inline;
}

<p class = "itemlist">We sell
	<span class = "items">
		<span>Bread</span>
		<span>Milk</span>
		<span>Fish</span>
		<span>Eggs</span>
		<span>Cheese</span>
	</span>
</p>

22.05.2019 23:49

var itemArray = ['Bread', 'Milk', 'Fish', 'Eggs', 'Cheese'];
var animationInterval;

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

function setItemName(_name) {
  var itemList = document.getElementsByClassName('items')[0];
  itemList.textContent = _name;
}

function startAnimation() {
  animationInterval = setInterval(function(){
    var randomNumber = getRandomInt(itemArray.length);
    setItemName(itemArray[randomNumber]);
  }, 1000)
}

function endAnimation() {
  clearInterval(animationInterval);
}

setItemName(itemArray[0]);

<p class = "itemlist">We sell
    <span class = "items"></span>
 </p>
  
<button onclick = "startAnimation();"> Start </button>
<button onclick = "endAnimation();"> End </button>

22.05.2019 23:53

Вы можете добавить задержку. вот пример кода для этого

<!DOCTYPE html>
<html>
<body>


 

 <p class = "itemlist">We sell
    <span class = "items">
      <span id = "demo"> Bread</span>
      
    </span>
  </p>

<script>
 
 

var delayInMilliseconds1 = 1000; 
var delayInMilliseconds2 = 2000; 
var delayInMilliseconds3 = 3000; 

setTimeout(function() {
    document.getElementById("demo").innerHTML = "Milk";
}, delayInMilliseconds1);

setTimeout(function() {
    document.getElementById("demo").innerHTML = "Fish";
}, delayInMilliseconds2);

setTimeout(function() {
    document.getElementById("demo").innerHTML = "Eggs";
}, delayInMilliseconds3);

</script>

</body>
</html>

22.05.2019 23:57

Установите элемент для запуска с использованием класса, такого как «первый».

Используя jQuery, возьмите список элементов и установите интервал для прохождения. Затем затемнить текущий активный и затемнить следующий.

Найдите следующий элемент либо просто схватив следующего брата, либо схватив первого дочернего элемента списка элементов, если вы дойдете до конца.

let itemsList = $(".items").first();

const changeItem = () => {
  let current = itemsList.find("span.active");
  current.removeClass("active");
  current.fadeOut(200, () => {
    let next;
    if (current.next().length > 0) next = current.next();
    else next = itemsList.children().first();
    next.addClass("active");
    next.fadeIn(200);
  });
}

setInterval(changeItem, 2000);

.items span {
  color: red;
  display: none;
}

span.first {
  display: inline-block;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class = "itemlist">We sell
    <span class = "items">
      <span class = "active first">Bread</span>
      <span>Milk</span>
      <span>Fish</span>
      <span>Eggs</span>
      <span>Cheese</span>
    </span>
  </p>

22.05.2019 23:57

Как насчет отделения данных от HTML? и используйте setInterval тогда

const itemList = ['Bread', 'Milk', 'Fish']
const prefix = "We Sell"

const placeholder = document.getElementById('placeholder');
let index = 0;

setInterval(() => {
  index = index >= itemList.length ? 0 : index;

  placeholder.innerHTML = `${prefix} <span style='color: red'> ${itemList[index]} </span>`;

  index++;
}, 1000)

<div id = "placeholder" />

23.05.2019 00:10

Для информации вы также можете использовать CSS-переменная и CSS-анимация

span {
  display: inline-block;
  vertical-align: top;
}

.items span {
  position: absolute;/* instead display */
  animation: var(--delay, 0) 10s hidsh linear infinite;
}

@keyframes hidsh {
  0%,
  80% {
    color: transparent;
  }
  80.1%,
  100% {
    color: initial
  }

<p class = "itemlist">We sell
  <span class = "items">
      <span style='--delay:-2s' >Bread </span>
  <span style='--delay:-4s'>Milk  </span>
  <span style='--delay:-6s'>Fish  </span>
  <span style='--delay:-8s'>Eggs  </span>
  <span style='--delay:-10s'>Cheese</span>
  </span>
</p>

You may also declare the custom properties in the style sheet if you do not want to touch the HTML

.items span              {--delay:-2s }
.items span:nth-child(2) {--delay:-4s }
.items span:nth-child(3) {--delay:-6s }
.items span:nth-child(4) {--delay:-8s }
.items span:nth-child(5) {--delay:-10s}
span {
  display: inline-block;
  vertical-align: top;
}

.items span {
  position: absolute;/* instead display*/
  animation: var(--delay, 0) 10s hidsh linear infinite;
}

@keyframes hidsh {
  0%,
  80% {
    color: transparent;/* instead visibility or opacity */
  }
  80.1%,
  100% {
    color: initial
  }

<p class = "itemlist">We sell
  <span class = "items">
   <span>Bread </span>
   <span>Milk  </span>
   <span>Fish  </span>
   <span>Eggs  </span>
   <span>Cheese</span>
  </span>
</p>

23.05.2019 01:10

Другие вопросы по теме

Как построить диагональную секцию героя?

Возможно ли, чтобы ребенок плавал над вертикальной прокруткой?

Выпадающий список поиска должен иметь html-форму с кнопкой отправки

Функция .val() возвращает undefined, но без скопированного идентификатора

Как предотвратить отрицательное значение моей маны

Встроенный Javascript перестал добавлять класс к элементу

Как написать буквенно-цифровой шаблон в HTML5?

HTML-форма внутри всплывающего окна начальной загрузки не работает

Отображение интерактивных элементов списка в зависимости от условия в Angular

Конкретный фон для одиночной навигационной ссылки

Автоматически переключаться между диапазонами

Ответы 7

Другие вопросы по теме

Похожие вопросы