#javascript #css #slider
Вопрос:
Я пытаюсь применить «непрозрачность / скольжение влево» для моего автоматического ползунка, но я не смог этого сделать. Пожалуйста, помогите мне с этим.
let images = ["images/a.jpg", "images/b.jpg", "images/c.jpg", "images/d.jpg", ]; let i = 0; function changeImg() { document.querySelector("#slider img").src = images[i]; if (i lt; images.length - 1) { i ; } else { i = 0; } setTimeout("changeImg()", 1000); } onload(changeImg()); #slider img { width: 100vw; height: 60vh; transition: opacity 2s ease-out; } lt;section id="slider"gt; lt;img name="slide" width="400" height="200" /gt; lt;/sectiongt; Комментарии:
1. Извините, но почему вы можете это сделать? где именно вы столкнулись с проблемой?
2. Слайдер работает нормально, но когда изображения меняются, я хочу добавить плавный переход. Поэтому я добавил этот «переход: облегчение непрозрачности 2s», но он не работает.
3. Я нигде не вижу, чтобы непрозрачность изображения менялась, поэтому никакого перехода никогда не происходит. Кстати, вы сможете изменить непрозрачность только входящего изображения, а не исходящего, так как в любой момент времени есть только одно место для отображения изображения. Это то, чего ты хочешь?
4. ДА. Пожалуйста, напишите код для реализации этого.
Ответ №1:
Первоначальное требование состоит в том, чтобы изображение исчезло и появилось другое.
Это может быть достигнуто путем размещения изображений одно поверх другого (абсолютное положение) и непрозрачности 0 с переходом, установленным на непрозрачность. Когда это конкретное изображение, поверните, чтобы показать изображение, прежде чем оно будет установлено в непрозрачность 0, а для нового изображения будет установлена непрозрачность 1.
let images = ["https://picsum.photos/id/1015/300/300", "https://picsum.photos/id/1016/200/300", "https://picsum.photos/id/1018/300/200.jpg", "https://picsum.photos/id/1022/400/300", ]; const slider = document.querySelector('#slider'); const imgEls = []; images.forEach(image =gt; { let imgEl = document.createElement('img'); imgEl.src = image; imgEls.push(imgEl); slider.appendChild(imgEl); }); let i = 0; function changeImg() { imgEls[i].style.opacity = 0; if (i lt; images.length - 1) { i ; } else { i = 0; } imgEls[i].style.opacity = 1; setTimeout("changeImg()", 1000); } window.onload = changeImg; #slider { width: 100vw; height: 60vh; position: relative; isplay: felx; justify-content: center; align-items: center; } #slider img { display: inline-block; width: 100vw; height: 60vh; object-fit: contain; transition: opacity 2s ease-out; opacity: 0; position: absolute; top: 0; left: 0; } lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;section id="slider"gt; lt;https://stackoverflow.com/questions/69870264/how-to-add-css-transitions-to-automatic-slider#img name="slide" width="400" height="200" /gt; lt;/sectiongt; Хотя действие, похоже, соответствует тому, что обсуждалось в комментариях, оно не создает реального «слайдера», и в вопросе также говорится о скольжении влево с помощью CSS.
Этот фрагмент использует несколько иной подход к коду вопроса, поскольку, как только начальная настройка слайдов была выполнена с использованием Javascript, все остальное выполняется с помощью CSS. Это имеет то преимущество, что система может просто передать анимацию на графический процессор без необходимости прерывать работу основной программы по тайм-ауту.
Каждое изображение расположено слева на 100% (т. Е. справа от экрана), и ему дается та же анимация, что и другому — переместитесь в центр, подождите, а затем переместитесь влево — непрозрачность уменьшается и уменьшается соответственно. Однако изображения начинают анимироваться в шахматном порядке, поэтому скольжение выглядит непрерывным.
const slider = document.querySelector('#slider'); const images = ["https://picsum.photos/id/1015/300/300", "https://picsum.photos/id/1016/200/300", "https://picsum.photos/id/1018/300/200", "https://picsum.photos/id/1022/400/300"]; let div; let count = 0; images.forEach(image =gt; { div = document.createElement('div'); div.style.animationDelay = (count * 2) 's'; count ; div.style.setProperty('--img', 'url(' image ')'); slider.appendChild(div); }); slider.style.setProperty('--n', count); #slider { overflow: hidden; width: 100vw; height: 60vh; position: relative; } #slider div { width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; display: inline-block; background-size: contain; background-position: center center; background-repeat: no-repeat; background-image: var(--img); animation-name: slide; animation-iteration-count: infinite; animation-timing-function: linear; animation-duration: calc(var(--n) * 2s); animation-fill-mode: forwards; } @keyframes slide { 0% { opacity: 0; transform: translateX(100vw); } 12.5% { opacity: 1; transform: translateX(0); } 25% { opacity: 1; transform: translateX(0); } 37.5%, 100% { opacity: 0; transform: translateX(-100vw); } } lt;div id="slider"gt;lt;/divgt; Обратите внимание, что настройки ключевых кадров предполагают 4 изображения. Значения % должны были бы быть изменены на большее или меньшее количество. К сожалению, CSS не допускает переменных в качестве значений % в ключевых кадрах, поэтому JS в идеале должен найти количество изображений и создать правильные ключевые кадры.
Комментарии:
1. Спасибо за ваш ответ, но это далеко за пределами моего понимания. Я был бы рад, если бы это было написано в соответствии с кодом, который я предоставил.
2. Кое-что из того, что вы хотите, можно сделать на основе вашего исходного кода. Вы можете оставить все как есть, просто добавив JS, чтобы установить непрозрачность текущего img на 0, а для следующего-на непрозрачность 1. Тогда ваш переход будет иметь некоторый эффект, но ваш код действительно слишком ограничен наличием только одного элемента, в котором можно отобразить изображение, чтобы сделать что-то похожее на слайдер.