如何解决使用范围滑块和点控件的图像滑块
我正在修改w3schools基本图像幻灯片轮播,以与范围滑块以及可点击的点一起使用。目的是能够移动滑块,并且图像会改变。只要我能理解需要发生的概念或逻辑,我就不会在乎样式。我可以想象单击的“点值”以某种方式匹配“滑块值”。咨询吗?
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
var RangeValue = document.getElementById("myRange").value;
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active","");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
.slide-container {
font-size: 10px;
position: fixed;
bottom: 15%;
right: 20%;
text-align: center;
width: 40%;
height: 40%;
}
.slide-container h1 {
float: left;
font-size: 1em;
color: white;
font-family: 'Montserrat',sans-serif;
text-transform: uppercase;
text-shadow: 1px 1px 3px rgb(53,53,53);
}
#run {
float: right;
font-size: 1em;
color: white;
background-color: #95A56E;
font-family: 'Montserrat',sans-serif;
text-transform: uppercase;
border-radius: 2px;
padding: 3px;
box-shadow: 1px 1px 3px rgb(53,53);
}
.slide-container img {
box-shadow: 1px 1px 3px rgb(53,53);
border-radius: 2px;
}
.mySlides {
display: none;
}
.dot {
cursor: pointer;
height: 6px;
width: 6px;
margin: 0 2px;
margin-top: 5px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,.dot:hover {
background-color: #95A56E;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
.range-slider {
-webkit-appearance: none;
width: 100%;
height: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
border-radius: 10px;
}
.range-slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #95A56E;
cursor: pointer;
}
.range-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 5px;
height: 20px;
background: #95A56E;
cursor: pointer;
border-radius: 10px;
box-shadow: 0px 1px 2px rgb(53,53);
}
.range-slider:hover {
opacity: 1;
}
<div class="slide-container">
<h1>Featured Cases</h1>
<h1 id="run">Run This Design</h1>
<div class="mySlides fade">
<img src="images/GWRevision – 1.png" style="width:100%">
</div>
<div class="mySlides fade">
<img src="images/Web 1920 – 1.png" style="width:100%">
</div>
<div class="mySlides fade">
<img src="images/Web 1920 – 1.png" style="width:100%">
</div>
<div>
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<input type="range" min="1" max="3" value="2" class="range-slider" id="myRange" oninput="currentSlide()">
</div>
解决方法
我自己弄清楚了!
向范围滑块添加了一个onclick并将其设置为与上面的点类似的currentslide功能,除了等于rangelider的值。
HTML
<input type="range" min="1" max="3" value = "1" class="range-slider" id="myRange" onclick="currentSlide(value)" >
在 dots [slideIndex-1] .className + =“ active”;
之后,将其添加到javascript的末尾JAVASCRIPT
document.getElementById("myRange").value = slideIndex;
我相信非常基本的东西,但我只是想学习。现在,如果我拖动滑块或单击圆点,它将转到正确的图像。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。