我想使用纯JavaScript来更改页面上的某些按钮来更改滑块。
我尝试在按钮和滑块之间定义一个公共值，以在js中循环以更改滑块，当我按下按钮但执行任何操作时根本不起作用。
var i,j;
var x=document.getElementsByClassName("part");
var circle = document.getElementsByClassName("circle");
var s = document.getElementsByClassName("content");
var test = document.getElementById("el");
for(j=0;j<x.length;j++)
{
x[j].addEventListener("click",function(){
for(i=0;i<circle.length;i++){
let t = circle[i];
t.style.display="none";
}
for(j=0;j<s.length;j++){
let m = s[j];
m.style.display="none";
}
var y=this.firstElementChild;
y.style.display="block";
});
}
function show(evt,name) {
document.getElementById(name).style.display="block";
}
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");
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";
} *
{
margin:0;
padding:0;
box-sizing: border-box;
}
.main
{
width: 60%;
height: 500px;
margin:100px auto;
position: relative;
}
.sidebar
{
border-left: 2px dashed #434a54;
width: 30%;
float: right;
position: absolute;
top:0;
right:0;
height:auto;
}
.sidebar ul
{
margin-left: 32px;
font-size: 60px;
color:#ffc732;
}
ul li{
width: 100%;
height: 60px;
line-height: 60px;
margin-bottom: 10px;
position: relative;
cursor: pointer;
z-index: 1;
}
li.part:hover span
{
color:#ffc732;
}
li.part span{
width:100px ;
font-size: 23px;
color: #775702;;
display: inline-block;
position: absolute;
top:0;
left:0;
text-align: right;
font-family:"B Nazanin";
}
ul>li:first-child::before
{
content: "";
width:5px;
height: 24px;
background-color:white;
position: absolute;
top:0px;
left:-35px;
z-index: -1;
}
ul>li:last-child::before
{
content: "";
width:5px;
height: 30px;
position: absolute;
bottom:-13px;
left:-35px;
background-color: white;
z-index: -1;
}
.circle {
width: 28px;
height: 28px;
border-radius: 50%;
border: 3px solid #ffc732;
position: absolute;
top: 19px;
left: -46px;
background-color: white;
z-index: -1;
display: none;
}
.content {
width: 70%;
height: auto;
padding: 50px;
}
/***********************slider**************/
.mySlides
{display: none}
.slideshow-container img
{
width: 100%;
height:100%;
}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
} <div class="main">
<div class="sidebar">
<ul>
<li class="part" >
<button class="circle" style="display: block;!important;" id="btn1" value="1" onclick="showVal(this.value)"></button>
<span >?????? ???</span>
</li>
<li class="part">
<button class="circle" id="btn2" value="2" onclick="showVal(this.value)" ></button>
<span >?????? ???</span>
</li>
<li class="part" >
<button class="circle" id="btn3" value="3" onclick="showVal(this.value)" ></button>
<span >?????? ???</span>
</li>
<li class="part" >
<button class="circle" id="btn4" value="4" onclick="showVal(this.value)"></button>
<span >?????? ?????</span>
</li>
</ul>
</div>
<div class="content" id="e1">
<h2>
slider1
</h2>
<div class="slideshow-container" id="testslider">
<div class="mySlides fade">
<img src="1%20(1).png" id="slimg1" >
<div class="text" >Caption Text</div>
</div>
<div class="mySlides fade" id="slimg2">
<img src="1%20(2).png">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade" id="slimg3">
<img src="1%20(3).png" >
<div class="text">Caption Three</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
</div>
<div class="content" id="e2">
<h2>slider2</h2>
<div class="slideshow-container">
<div class="mySlides fade">
<img src="image2.jpg">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<img src="image2.jpg" >
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<img src="image2.jpg">
<div class="text">Caption Three</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
</div>
当我按下页面上的按钮时，我想更改滑块。
答案 0 :(得分：0)
调试代码花费了很多时间。太乱了，但最后我帮了你。您需要更改几行：
JS：
for (let i = 0; i < circle.length; i++) {
circle[i].onclick = function (e) {
e.preventDefault();
var partIndex = e.target.value;
console.log(e.target.value, "click");
let t = circle[i];
for (let j = 0; j < circle.length; j++) {
circle[j].classList.remove("active");
}
t.classList.add("active");
for(let k=0; k<s.length;k++){
s[k].style.display = 'none';
}
changePartHTML(partIndex)
};
}
function changePartHTML(partIndex){
//Do something here
var targetPart = document.querySelector('#e'+partIndex);
targetPart.style.display = 'block';
}
CSS需要更改为：
.circle {
width: 28px;
height: 28px;
border-radius: 50%;
border: 3px solid #ffc732;
position: absolute;
top: 19px;
left: -46px;
background-color: white;
z-index: 9999;
display: block;
cursor: pointer;
}
.part .active{
background-color: green;
}
在以下位置查看演示代码：https://codepen.io/tien-bui/pen/BvwKVb