Java 脚本幻灯片不会显示幻灯片
Java Script slideshow won't display slides
我已经对这个 JavaScript 幻灯片进行了编码以显示大量图像,但是它们没有显示在任何地方,唯一显示的是我包含的两个用于选择幻灯片的按钮。
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x= document.getElementsByClassName("slides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
<img class="slides" href="Bgimage.jpg">
<img class="slides" href="roses.jpg">
<img class="slides" href="sunflowers.jpg">
<img class="slides" href="Vessel1.jpg">
<button class="go-left" onclick="plusDivs(-1)">❮</button>
<button class="go-right" onclick="plusDivs(+1)">❯</button>
非常感谢任何帮助。谢谢!
img标签使用src来判断图片来源。如果将 href 更改为 src,您应该可以再次看到图像。
<img class="slides" src="Bgimage.jpg">
<img class="slides" src="roses.jpg">
<img class="slides" src="sunflowers.jpg">
<img class="slides" src="Vessel1.jpg">
Img
标签有 src
而不是 href
。您的代码完美运行。
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x= document.getElementsByClassName("slides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
<img class="slides" src="http://fakeimg.pl/250x100/">
<img class="slides" src="http://fakeimg.pl/250x100/ff0000/">
<img class="slides" src="http://fakeimg.pl/350x200/ff0000/000">
<img class="slides" src="http://fakeimg.pl/250x100/ff0000/">
<button class="go-left" onclick="plusDivs(-1)">❮</button>
<button class="go-right" onclick="plusDivs(+1)">❯</button>
var slideIndex = 0;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x= document.getElementsByClassName("slides");
if (n >= x.length) { slideIndex = 0; }
if (n < 0) { slideIndex = x.length-1; }
for (i = 0; i < x.length; i++) {
if(i!==slideIndex) {
x[i].style.display = "none";
} else {
x[i].style.display = "block";
}
}
}
<img class="slides" src="Bgimage.jpg">
<img class="slides" src="roses.jpg">
<img class="slides" src="sunflowers.jpg">
<img class="slides" src="Vessel1.jpg">
<button class="go-left" onclick="plusDivs(-1)">❮</button>
<button class="go-right" onclick="plusDivs(+1)">❯</button>
我已经对这个 JavaScript 幻灯片进行了编码以显示大量图像,但是它们没有显示在任何地方,唯一显示的是我包含的两个用于选择幻灯片的按钮。
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x= document.getElementsByClassName("slides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
<img class="slides" href="Bgimage.jpg">
<img class="slides" href="roses.jpg">
<img class="slides" href="sunflowers.jpg">
<img class="slides" href="Vessel1.jpg">
<button class="go-left" onclick="plusDivs(-1)">❮</button>
<button class="go-right" onclick="plusDivs(+1)">❯</button>
非常感谢任何帮助。谢谢!
img标签使用src来判断图片来源。如果将 href 更改为 src,您应该可以再次看到图像。
<img class="slides" src="Bgimage.jpg">
<img class="slides" src="roses.jpg">
<img class="slides" src="sunflowers.jpg">
<img class="slides" src="Vessel1.jpg">
Img
标签有 src
而不是 href
。您的代码完美运行。
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x= document.getElementsByClassName("slides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
<img class="slides" src="http://fakeimg.pl/250x100/">
<img class="slides" src="http://fakeimg.pl/250x100/ff0000/">
<img class="slides" src="http://fakeimg.pl/350x200/ff0000/000">
<img class="slides" src="http://fakeimg.pl/250x100/ff0000/">
<button class="go-left" onclick="plusDivs(-1)">❮</button>
<button class="go-right" onclick="plusDivs(+1)">❯</button>
var slideIndex = 0;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x= document.getElementsByClassName("slides");
if (n >= x.length) { slideIndex = 0; }
if (n < 0) { slideIndex = x.length-1; }
for (i = 0; i < x.length; i++) {
if(i!==slideIndex) {
x[i].style.display = "none";
} else {
x[i].style.display = "block";
}
}
}
<img class="slides" src="Bgimage.jpg">
<img class="slides" src="roses.jpg">
<img class="slides" src="sunflowers.jpg">
<img class="slides" src="Vessel1.jpg">
<button class="go-left" onclick="plusDivs(-1)">❮</button>
<button class="go-right" onclick="plusDivs(+1)">❯</button>