Question

我有这个＆＃34;幻灯片＆＃34;在这里，您可以通过点击进入下一张幻灯片。我希望每个图像都有相同的按钮但不同的文字。所以我试着改变＆＃34; active＆＃34;的innerHTML。当其中一个＆＃34; mySlides＆＃34; vars设置为阻止。但它不会认出来..你能帮助我吗？

＆＃13;

class Home extends AppCompatActivity implements OnFragmentInteractionListener {
  //                                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 // override methods of OnFragmentInteractionListener and provide their implementation
}

＆＃13;

// JavaScript Document

var active = document.getElementById("active"),
	  x = document.getElementsByClassName("mySlides");

var slideIndex = 1;
	showDivs(slideIndex);

function plusDivs(n) {
	showDivs(slideIndex += n);
}

function currentDiv(n) {
	showDivs(slideIndex = n);
}

function showDivs(n) {
	var i,
		dots = document.getElementsByClassName("demo");
		
	
	if (n > x.length) {slideIndex = 1;
	} 
	
	if (n < 1) {slideIndex = x.length;
	}
	
	for (i = 0; i < x.length; i++) {
		x[i].style.display = "none";
	}
	
	for (i = 0; i < dots.length; i++) {
	  dots[i].className = dots[i].className.replace(" w3-white", "");
	}
	 
	x[slideIndex-1].style.display = "block";
	dots[slideIndex-1].className += " w3-white";
}


function visible() {
	
	if (x[0].style.display = "block") {
		active.innerHTML = "test";
	}
	
}

＆＃13;

Answer 1

请查看以下

// JavaScript Document


var pictureText = Array("Picture1", "Picture2", "Picture3", "Picture4");

var active = document.getElementById("active"),
	  x = document.getElementsByClassName("mySlides");

var slideIndex = 1;

showDivs(slideIndex);

function plusDivs(n) {
	showDivs(slideIndex += n);
}

function currentDiv(n) {
	showDivs(slideIndex = n);
}

function showDivs(n) {
	var i,
		dots = document.getElementsByClassName("demo");
		
	
	if (n > x.length) {slideIndex = 1;
	} 
	
	if (n < 1) {slideIndex = x.length;
	}
	
	for (i = 0; i < x.length; i++) {
		x[i].style.display = "none";
	}
	
	for (i = 0; i < dots.length; i++) {
	  dots[i].className = dots[i].className.replace(" w3-white", "");
	}
	 
	x[slideIndex-1].style.display = "block";
	dots[slideIndex-1].className += " w3-white";
  
  visible(slideIndex); 
}


function visible(slideIndex) {
  
  document.getElementById("img"+slideIndex).style.display = "none";
	active.innerHTML = pictureText[slideIndex];	
}

.navarrow-left{
  float: left;
}
.navarrow-right{
  float: right;
}

<div class="w3-content w3-display-container">
 <div id ="slider-wrapper">
  <img id="img1" class="centerscreen mySlides slidepos fade" src="x.jpg" alt="picture1">
  <img id="img2" class="centerscreen mySlides slidepos fade" src="xy.jpg" alt="picture2">
  <img id="img3" class="centerscreen mySlides slidepos fade" src="xyz.jpg" alt="picture3"></div>
  <div class="w3-center w3-container w3-section w3-large w3-text-white centerscreen badgepos">
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
  </div>
   	<container id="buttons" class="centerscreen">
    <div id="navarrow-left" class="w3-left w3-hover-text-black btn" onclick="plusDivs(-1)">&#10094;</div>
    <div id="navarrow-right" class="w3-right w3-hover-text-black btn" onclick="plusDivs(1)">&#10095;</div>
	</container>
</div>

<div id="active"></div>

当某个元素的显示风格为＆＃34; block＆＃34;

1 个答案: