如何在我的 html 文档上获得多个幻灯片？
[英]How do I get multiple slideshows on my html document?
问题描述
我正在使用有关如何将多个幻灯片添加到 HTML 文档的 W3 Schools 教程： https : //www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_multiple
这是链接。 但是，我的问题是如何向页面添加 3 个幻灯片？
我所尝试的是复制并粘贴 DIV 类中的 mySlides2 部分，并将其从 mySlides2 更改为 mySlides3。 并且我还将 mySlides3 添加到任何引用 mySlides2 和 1 的内容中。但是，对于 mySlides3，我最终将我的图像垂直向下列出，并且控制 mySlides2 的下一个/后退控件。 这是我的代码：
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" type="text/css" href="main.css">
<html>
<body>
<p>Face Mask</p>
<div class="slideshow-container">
<div class="mySlides1">
<img src="/sample/fm1.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample/fm2.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample/fm3.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample/fm4.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample/fm5.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample/fm6.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample/fm7.jpg" id="border" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>
<p>Deodorant</p>
<div class="slideshow-container">
<div class="mySlides2">
<img src="/sample/nd1.jpg" id="border" style="width:100%">
</div>
<div class="mySlides2">
<img src="/sample/nd2.jpg" id="border" style="width:100%">
</div>
<div class="mySlides2">
<img src="/sample/nd3.jpg" id="border" style="width:100%">
</div>
<div class="mySlides2">
<img src="/sample/nd4.jpg" id="border" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</a>
<p>Deodorant</p>
<div class="slideshow-container">
<div class="mySlides3">
<img src="/sample/fd1.jpg" id="border" style="width:100%">
</div>
<div class="mySlides3">
<img src="/sample/fd2.jpg" id="border" style="width:100%">
</div>
<div class="mySlides3">
<img src="/sample/fd3.jpg" id="border" style="width:100%">
</div>
<div class="mySlides3">
<img src="/sample/fd4.jpg" id="border" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</a>
</div>
<script>
var slideIndex = [1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3"]
showSlides(1, 0);
showSlides(1, 1);
function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}
function showSlides(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 1) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}
</script>
</body>
</html>
* {box-sizing: border-box}
.mySlides1, .mySlides2, .mySlides3
// When I add .mySlides3 here, the images do not appear at all for .mySlides3
{display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 500px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 0%;
width: auto;
padding: 50px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 10px 10px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 0px 0 0 0px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}
3 个解决方案
解决方案1
0 已采纳 2020-03-20 06:31:54
所以我测试了代码并更新了它。 您的 HTML 文件中只有 3-4 处很小的更改。 请务必用您的代码替换它。 CSS 文件没有变化。 只需用我的代码替换您的 HTML 文件代码，您就会看到 3 个幻灯片。
HTML 文件代码
<link rel="stylesheet" type="text/css" href="main.css">
<html>
<body>
<p>Face Mask</p>
<div class="slideshow-container">
<div class="mySlides1">
<img src="/sample/fm1.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample/fm2.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample/fm3.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample/fm4.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample/fm5.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample/fm6.jpg" id="border" style="width:100%">
</div>
<div class="mySlides1">
<img src="/sample/fm7.jpg" id="border" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>
<p>Deodorant</p>
<div class="slideshow-container">
<div class="mySlides2">
<img src="/sample/nd1.jpg" id="border" style="width:100%">
</div>
<div class="mySlides2">
<img src="/sample/nd2.jpg" id="border" style="width:100%">
</div>
<div class="mySlides2">
<img src="/sample/nd3.jpg" id="border" style="width:100%">
</div>
<div class="mySlides2">
<img src="/sample/nd4.jpg" id="border" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</a>
</div>
<p>Deodorant</p>
<div class="slideshow-container">
<div class="mySlides3">
<img src="/sample/fd1.jpg" id="border" style="width:100%">
</div>
<div class="mySlides3">
<img src="/sample/fd2.jpg" id="border" style="width:100%">
</div>
<div class="mySlides3">
<img src="/sample/fd3.jpg" id="border" style="width:100%">
</div>
<div class="mySlides3">
<img src="/sample/fd4.jpg" id="border" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 2)">❮</a>
<a class="next" onclick="plusSlides(1, 2)">❯</a>
</div>
<script>
var slideIndex = [1,1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);
function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}
function showSlides(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 2) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}
</script>
</body>
</html>
解决方案2
0 2020-03-20 06:36:22
您必须对代码进行更多调整。 您的第三张幻灯片应如下所示：
<div class="w3-content w3-display-container">
<img class="mySlides3" src="project2/test/block1img.jpg" style="width:100%">
<img class="mySlides3" src="project2/test/block3img.jpg" style="width:100%">
<img class="mySlides3" src="project2/test/block2img.jpg" style="width:100%">
<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1, 2)">❮</button>
<button class="w3-button w3-black w3-display-right" onclick="plusDivs(1, 2)">❯</button>
</div>
然后在下面，像这样调整：
var slideIndex = [2,1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3"]
showDivs(1, 0);
showDivs(1, 1);
showDivs(1, 2);
基本上，在 plusDivs(a, b) 的幻灯片容器中，a 指的是按钮是增加还是减少索引，而 b 表示正在更改哪个幻灯片。
在 showDivs(a,b) 中，a 指的是显示哪个图像，而 b 指的是哪个幻灯片。 var slideIndex 显示每个幻灯片应该显示哪个图像。
解决方案3
0 2020-03-20 06:46:17
在一个页面上播放多个幻灯片
为这个 CSS CDN 添加一些库文件或 CDN
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" rel="stylesheet" type="text/css"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet" type="text/css"/>
JS CDN 或脚本
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js" type="text/javascript"></script>
<style>
#slider .container-fluid{
padding: 0 15px;
}
#slider .slider-inner{
padding: 0;
}
.slider-inner .item img{
display: block;
width: 100%;
height: auto;
}
.slider-inner h1{
color: purple;
}
</style>
幻灯片放映的 HTML
幻灯片 1
<section id="slider">
<div class="container-fluid">
<div class="slider-inner col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h1>FIRST</h1>
<div id="owl-demo" class="owl-carousel owl-theme" style="margin-top: 20px;">
<div class="item">
<img src="img1.jpg" alt="sliderimg1">
</div>
<div class="item">
<img src="img2.png" alt="sliderimg2">
</div>
<div class="item">
<img src="img3.png" alt="sliderimg3">
</div>
<div class="item">
<img src="img4.png" alt="sliderimg3">
</div>
</div>
</div>
<div class="slider-inner col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h1>SECOND</h1>
<div id="owl-demo" class="owl-carousel owl-theme" style="margin-top: 20px;">
<div class="item">
<img src="img1.png" alt="sliderimg1">
</div>
<div class="item">
<img src="img2.png" alt="sliderimg2">
</div>
<div class="item">
<img src="img3.png" alt="sliderimg3">
</div>
<div class="item">
<img src="img4.jpg" alt="sliderimg3">
</div>
</div>
</div>
<div class="slider-inner col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h1>Third</h1>
<div id="owl-demo" class="owl-carousel owl-theme" style="margin-top: 20px;">
<div class="item">
<img src="img1.jpg" alt="sliderimg1">
</div>
<div class="item">
<img src="img2.png" alt="sliderimg2">
</div>
<div class="item">
<img src="img3.png" alt="sliderimg3">
</div>
<div class="item">
<img src="img4.png" alt="sliderimg3">
</div>
</div>
</div>
<div class="slider-inner col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h1>FOURTH</h1>
<div id="owl-demo" class="owl-carousel owl-theme" style="margin-top: 20px;">
<div class="item">
<img src="img1.png" alt="sliderimg1">
</div>
<div class="item">
<img src="img2png" alt="sliderimg2">
</div>
<div class="item">
<img src="img3.png" alt="sliderimg3">
</div>
<div class="item">
<img src="img4.jpg" alt="sliderimg3">
</div>
</div>
</div>
</div>
</section>
幻灯片放映的 Java 脚本
<script>
$(function () {
var count = 0;
$('.owl-carousel').each(function () {
$(this).attr('id', 'owl-demo' + count);
$('#owl-demo' + count).owlCarousel({
navigation: true,
slideSpeed: 300,
pagination: true,
singleItem: true,
autoPlay: 2000,
autoHeight: true
});
count++;
});
});
</script>
如何在UIWebView中使用javascript获取html文档大小
[英]How do I get the html document size using javascript in a UIWebView
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.