如何在滑块中的图像之间转换 [英] how to transition between images in a slider
问题描述
我有一个带输入范围的简单图像滑块。我想选择输入范围值,并能够淡入和淡出图像。
I have a simple image slider with input range. I want to pick input range value and be able to fade-in and fade out images.
问题是 - 我的设置必须保持这种状态。我需要在li中使用img标签,并且需要将图像作为css背景URL在类名下。
The problem is - my setup has to remain this way. I need to have img tags within li and need to have images as css background url under classnames.
我如何识别当前播放并转换到下一个取决于哪里滑块是?
How do i identify the current playing and transition to the next depending on where the slider is?
要求:如果用户在滑块上进入范围2,则应显示image2。如果用户进入范围4,则image4应该是可见的,依此类推。
Requirement: If user goes to range 2 on slider, image2 should be visible. if user goes to range 4, image4 should be visible and so on.
我已经能够读取输入范围并找到该图像类的图像。
I have been able to read the input range and locate the image with that image class.
如何删除上一个活动状态并插入此新图像?
How do I remove the "active" state of previous one and insert this new image?
请查找附加代码
let line = document.getElementById("line");
line.addEventListener("input", function(event){
setNewImage(event.target.value);
});
function setNewImage(value){
let currentImage = document.getElementsByClassName("playing");
let newImageClassName = "image"+value;
}
.container {
display: flex;
justify-content: center;
flex-direction: column;
background-color: lavendar;
width: 400px;
height: 300px;
}
.image-container {
width: 380px;
height: 280px;
/* background-color: pink; */
}
.scrollbar {
/* padding: 0 5px 5px 0; */
}
.scrollbar input {
width: 380px;
}
ul li {
list-style: none;
}
.image {
width: 380px;
height: 260px;
display: none;
}
.playing {
display: block;
}
.image1 {
background: url('http://placekitten.com/380/260') no-repeat;
}
.image2 {
background: url('http://placekitten.com/378/260') no-repeat;
}
.image3 {
background: url('http://placekitten.com/380/259') no-repeat;
}
.image4 {
background: url('http://placekitten.com/379/260') no-repeat;
}
.image5 {
background: url('http://placekitten.com/383/260') no-repeat;
}
.image6 {
background: url('http://placekitten.com/380/261') no-repeat;
}
<div class="container">
<div class="image-container">
<ul>
<li><img class="playing image image1" /></li>
<li><img class="image image2" /></li>
<li ><img class="image image3" /></li>
<li><img class="image image4" /></img></li>
<li><img class="image image5" /></li>
<li><img class="image image6"/></li>
</ul>
</div>
<div class="scrollbar">
<input id="line" type="range" min=1 max =6 />
</div>
</div>
我得到了输入范围值。非常感谢来自这里的帮助!谢谢!
I am getting the input range value. Help from here is greatly appreciated! Thanks!
推荐答案
我能够解决它!
let line = document.getElementById("line");
line.addEventListener("input", function(event){
setNewImage(event.target.value);
});
function setNewImage(value){
// console.log(value);
let currentImage = document.getElementsByClassName("playing");
let removedImage = currentImage[0].classList.remove("playing");
let imageToAdd = "image"+value;
// console.log(imageToAdd);
let getElToAdd = document.getElementsByClassName(imageToAdd);
// console.log(getElToAdd);
let newEl = getElToAdd[0];
newEl.classList.add("playing");
}
.container {
display: flex;
justify-content: center;
flex-direction: column;
background-color: lavendar;
width: 400px;
height: 300px;
}
.image-container {
width: 380px;
height: 280px;
/* background-color: pink; */
}
.scrollbar {
/* padding: 0 5px 5px 0; */
}
.scrollbar input {
width: 380px;
}
ul li {
list-style: none;
}
.image {
width: 380px;
height: 260px;
display: none;
}
.playing {
display: block;
}
.image1 {
background: url('http://placekitten.com/380/260') no-repeat;
}
.image2 {
background: url('http://placekitten.com/378/260') no-repeat;
}
.image3 {
background: url('http://placekitten.com/380/259') no-repeat;
}
.image4 {
background: url('http://placekitten.com/379/260') no-repeat;
}
.image5 {
background: url('http://placekitten.com/383/260') no-repeat;
}
.image6 {
background: url('http://placekitten.com/380/261') no-repeat;
}
<div class="container">
<div class="image-container">
<ul>
<li><img class="playing image image1" /></li>
<li><img class="image image2" /></li>
<li ><img class="image image3" /></li>
<li><img class="image image4" /></img></li>
<li><img class="image image5" /></li>
<li><img class="image image6"/></li>
</ul>
</div>
<div class="scrollbar">
<input id="line" type="range" min=1 max =6 />
</div>
</div>
这篇关于如何在滑块中的图像之间转换的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!