JavaScript的 - 试图添加图像幻灯片与JS，但它不起作用？ [英] Javascript - Trying to Add images to slideshow with JS but it doesn't work?
本文介绍了JavaScript的 - 试图添加图像幻灯片与JS，但它不起作用？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图制作一个函数，用图像填充幻灯片的空容器，每个图像都包含在它自己的div中。
我的网页有一个未定数量的模态图像，点击后，打开图像的幻灯片专辑。我得到了这个工作的1个图像，然后意识到，它有一个未定尺寸的未定数量的幻灯片工作我应该做一个函数，填充幻灯片div。我计划让每个模态图像具有1,2,3 ...等的数据属性，并且有一个包含多个对象的数组，每个对象的名字都类似1,2,3 ......等 d使用此信息创建并附加正确的div和图像到幻灯片容器。我会发布我想要的幻灯片容器div的样子，我现有的代码，以及应该发生什么的小提琴。我是JavaScript新手，并感谢帮助。我不确定我在这里做了什么不正确的事情，如果我没有解释得很好，那么我会添加更多。
编辑：
I已经注意到，在我的模态图像中，如果在onClick中我首先放上fillSlides，其他两个函数将不起作用（或不会被调用），但是如果我在末尾打开一个空的幻灯片。我不明白为什么。
https：/ /jsfiddle.net/nhk3o0m1/26/
目前的HTML：
< body>
< h2 id =titlestyle =text-align：center> hellkkko< / h2>
< div class =row>
< div class =column>
< / div>
< / div>
< div id =myModalclass =modal>
< span class =close cursoronclick =closeModal（）>& times;< / span>
< div class =modal-content>
< a class =prevonclick =plusSlides（-1）>&＃10094;< / a>
< a class =nextonclick =plusSlides（1）>&＃10095;< / a>
< / div>
< / div>
我想让我的.modal-content div在函数运行后看起来像：
< div class =modal-content>
< div class =mySlides>
< img src =图片/ LS_01.jpgclass =img>
< / div>
< div class =mySlides>
< img src =图片/ LS_02.jpgclass =img>
< / div>
< div class =mySlides>
< img src =图片/ LS_03.jpgclass =img>
< / div>
< div class =mySlides>
< img src =图片/ LS_04.jpgclass =img>
< / div>
< a class =prevonclick =plusSlides（-1）>&＃10094;< / a>
< a class =nextonclick =plusSlides（1）>&＃10095;< / a>
< / div>
Javascript：
function fillSlides（modalID）{var container = document.getElementsByClassName（modal-content）; var slides = {1：[Images / LS_01.jpg，Images / LS_02.jpg，Images / LS_03.jpg，Images / LS_04.jpg]，2：[图片/ 图像/ LS_06.jpg，图像/ LS_07.jpg，图像/ LS_08.jpg]，3：[Images / LS_09.jpg，Images / LS_10.jpg ，Images / LS_11.jpg，Images / LS_12.jpg]}; var modal_num = modalID.getAttribute（'data-modal'）; for（var i = slides [modal_num] .length; i> 0; i--）{var the_divs = document.createElement（'div'）; var s_img = document.createElement（'img'）; the_divs.className ='mySlides'; s_img.src =幻灯片[modal_num] [i]; the_divs.appendChild（s_img）; container.appendChild（the_divs）; }}
< h2 id =titlestyle = text-align：center> hellkkko< / h2>< div class =row> < div class =column> < img id =modal-1src =https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpgstyle =max-width：100％data -modal =1onclick =openModal（）; currentSlide（1）; fillSlides（this）; class =hover-shadow cursor> < / div>< / div>< div id =myModalclass =modal> < span class =close cursoronclick =closeModal（）>& times;< / span> < div class =modal-content> < a class =prevonclick =plusSlides（-1）>&＃10094;< / a> < a class =nextonclick =plusSlides（1）>&＃10095;< / a> < / div>< / div>
解决方案
添加了一个即时生成幻灯片的函数。 HTML中没有幻灯片，箭头控件位于 #content 中。你没有提供关于专辑如何存在的细节，所以我制作了2张额外专辑的缩略图。此外，还有一个解决方案，解决您的问题，即除箭除外。这个CSS有点不可思议，但我相信你可以很容易地纠正它。
详情在演示中评论
Demo
<！DOCTYPE html> ;< HTML> < HEAD> < meta charset =utf-8> < meta name =viewportcontent =width = device-width，initial-scale = 1，user-scalable = no> <标题>< /标题> <风格> html，body {height：100％; width：100％} body {font-family：Verdana，sans-serif;保证金：0; } * {box-sizing：border-box; } .img {max-width：100％;最大高度：100％;宽度：自动;身高：自动; object-fit：包含; } .row {display：flex;证明内容：空间之间; } .column {width：25％; padding：0 8px; } / *模态（背景）* / .modal {display：none;位置：固定; z-index：1; padding-top：100px;左：0; top：0;宽度：100％;身高：100％; overflow-x：hidden; overflow-y：scroll;背景：rgba（0，0，0，0.9）; } / *模态内容* / .modal-content {position：relative; background-color：rgba（0，0，0，0.9）;保证金：汽车;填充：0;宽度：100％; max-width：1200px; } / *关闭按钮* / .close {color：white;位置：绝对;顶部：10px; right：25px; font-size：35px; font-weight：bold; } .close：hover，.close：focus {color：＃999;文字修饰：无;光标：指针; } / *下一步&上一个按钮* / .prev，.next {cursor：pointer;位置：绝对;顶部：50％;宽度：自动;填充：16px; margin-top：-50px;白颜色; font-weight：bold; font-size：20px;过渡：0.6s缓解; border-radius：0 3px 3px 0;用户选择：无; -webkit-user-select：none; } / *将下一个按钮放在右边* / .next {right：0; border-radius：3px 0 0 3px; } / *在悬停时，添加一点透明的黑色背景色* / .prev：hover，.next：hover {background-color：rgba（0，0，0，0.8）;文字修饰：无; } / *数字文本（1/3等）* / .nth {color：＃f2f2f2; font-size：12px; padding：8px 12px;位置：绝对;正确：0; } img {margin-bottom：-4px;光标：指针} img.hover-shadow {转换：全部.2s放宽; } .hover-shadow：hover {transform：scale（1.1）; } .modal-content {-webkit-animation-name：zoom; -webkit-animation-duration：0.6s;动画名称：缩放;动画持续时间：0.6s; } @keyframes zoom {from {transform：scale（0）} to {transform：} {-webkit-keyframes zoom {from {-webkit-transform：scale（0）} to {-webkit-transform：scale（1） scale（1）}} .slide img {display：block;身高：100％;保证金：0汽车; margin-bottom：50px; } .slide {text-align：center;身高：80vh;显示：无; } .cap {font-size：1.5em;背景：rgba（0，0，0，.4）;位置：绝对; z-index：2;左：0; top：0;正确：0; text-align：center; color：#fff} .act {display：block}< / style> < /头> <身体GT; <报头GT; < div class =row> < div class =column> < img src =https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpgstyle =max-width：100％onclick =album（img0，cap0 ）; openModal（）;类=悬停阴影> < / DIV> < div class =column> < img src =https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpgstyle =max-width：100％onclick =album（img1，cap1 ）; openModal（）;类=悬停阴影> < / DIV> < div class =column> < img src =https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpgstyle =max-width：100％onclick =album（img2，cap2 ）; openModal（）;类=悬停阴影> < / DIV> < / DIV> < /报头> < section id =box> < div id =xModalclass =modal> < span class =close cursoronclick =closeModal（）>& times;< / span> < div class =modal-contentid ='content'> < a class =prevonclick =plusSlides（-1）>&＃10094;< / a> < a class =nextonclick =plusSlides（1）>&＃10095;< / a> < / DIV> < / DIV> < /节> <页脚> < /页脚> <脚本> / * 3数组是必需的：| = 1.一个字符串数组。 ||每个表示图像的src | = 2。一个字符串数组。每个代表||一个figcaption的文本| = 3.一个空数组||对于每个附加专辑添加＃1和＃2，＃3 ||在||的开始处被清空并重新使用一个新的循环。 * / // Album 0 var img0 = [http://www.catholicevangelism.org/wp-content/uploads/2013/06/1200x800.gif，http://chasingseals.com/wp-content/uploads /2014/02/greenlandBanner2000x800.jpg，http://www.a1carpet-to.com/wp-content/uploads/2015/08/600x400.png，https://support.kickofflabs.com/wp -content / uploads / 2016/06 / 800x1200.png]; var cap0 = ['caption1'，'caption2'，'caption3'，'caption4']; // Album 1 var img1 = ['https://d3i6fh83elv35t.cloudfront.net/newshour/app/uploads/2016/05/729665main_A-BlackHoleArt-pia16695_full-1024x576.jpg'，'http://cdn.newsapi.com .au / image / v1 / 85fb305132eb20ebbb01af386983c8a1'，'http://science.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Science/Images/Content/neptune-pia01492-ga.jpg'，'https：// cdn .spacetelescope.org / archives / images / wallpaper1 / heic1509a.jpg'，'https://i.giphy.com/media/JCUyexH8Zaf8k/giphy.webp']; var cap1 = ['Title I'，'Title II'，'Title III'，'Title IV'，'Title V']; // Album 2 var img2 = ['https://i.ytimg.com/vi/YeQnLnRvZ9Y/maxresdefault.jpg'，'https://www.thesun.co.uk/wp-content/uploads/2017/08 /nintchdbpict000319076839.jpg?strip=all&w=960'，'https://i0.wp.com/www.sketchysloth.com/wp-content/uploads/2016/07/Legendary-Hinging-Garden-Of-Babylon .jpg？fit = 710％2C495& ssl = 1'，'https://i.ytimg.com/vi/YoRvJcgSDE4/maxresdefault.jpg'，'https://www.realmofhistory.com/wp-content/uploads /2017/01/mausoleum-at-halicarnassus-restored_1.jpg'，'http://www.ancient-origins.net/sites/default/files/field/image/statue-of-Zeus-Olympia.jpg'， 'https://i.ytimg.com/vi/F2yYkbinGnc/maxresdefault.jpg']; var cap2 = ['罗得斯巨像'，'吉萨大金字塔'，'巴比伦空中花园'，'亚历山大灯塔'，'哈利卡纳苏斯陵墓'，'奥林匹亚宙斯雕像'，'阿尔忒弥斯神庙在以弗所']; //声明一个空数组var data = []; //在循环之外声明一些计数器（或使用let的循环内部）var i，b，x; //引用将包含幻灯片的节点var con = document.getElementById（'content'）; / *在每次迭代中... | =清空数据数组| =创建一个对象... ||将img []的值添加到src属性||中将cap []的值添加到cap属性||将索引+1的当前值添加到pos属性||将对象推入数据数组* * //获取数据数组的总长度//调用genSlides（）函数相册（img，cap）{data.length = 0; for（i = 0; i< img.length; i ++）{var ele = new Object; ele.src = img [i]; ele.cap = cap [i]; ele.pos = i + 1; data.push（ELE）; } var qty = data.length; genSlides（qty）} console.log（data）; / *通过qty通过... | =在每次迭代中... | =创建一个documentFragment ||它将允许我们向||添加新的元素它仍然不在DOM ||中这是因为DOM ||中的任务更快比较而言，浏览器速度较慢。 | =注意数据数组正在被使用||分配唯一的值。 * / function genSlides（qty）{for（b = 0; b
Hey I'm trying to make a function that fills an empty container of a slideshow with images, with each image being contained in it's own div.
My webpage have an undetermined amount of modal images which , when clicked, open a slideshow album of images. I got this working for 1 image then realized that to have it work for an undetermined amount of slideshows of undetermined size I should make a function that fills the slideshow div. I planned to have each modal image to have a data attribute of "1,2,3...etc" and have a bunch an array with multiple objects each named similarly "1,2,3...etc" then I'd use this information to create and append the correct divs and images to the slideshow container. I will post what I want the slideshow container div to look like, my existing code, and a fiddle of what is supposed to happen. I am new to javascript and appreciate the help. I'm not certain what I've done incorrectly here, and If I haven't explained well enough then I will add more.
Edit: I have noticed that in my modal image, if in the onClick I put fillSlides first, the other two functions won't work (or won't be called), but if I put it at the end it opens an empty slideshow. I don't get why.
https://jsfiddle.net/nhk3o0m1/26/
Current HTML:
<body >
<h2 id="title" style="text-align:center">hellkkko</h2>
<div class="row">
<div class="column">
<img id="modal-1" src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg" style="max-width:100%" data-modal="1" onclick="openModal();currentSlide(1); fillSlides(this);" class="hover-shadow cursor">
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
What I want my .modal-content div to look like after the function runs:
<div class="modal-content">
<div class="mySlides">
<img src="Images/LS_01.jpg" class="img">
</div>
<div class="mySlides">
<img src="Images/LS_02.jpg" class="img">
</div>
<div class="mySlides">
<img src="Images/LS_03.jpg" class="img">
</div>
<div class="mySlides">
<img src="Images/LS_04.jpg" class="img">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
Javascript:
function fillSlides(modalID) {
var container = document.getElementsByClassName("modal-content");
var slides = {
"1": ["Images/LS_01.jpg", "Images/LS_02.jpg", "Images/LS_03.jpg", "Images/LS_04.jpg"],
"2": ["Images/LS_05.jpg", "Images/LS_06.jpg", "Images/LS_07.jpg", "Images/LS_08.jpg"],
"3": ["Images/LS_09.jpg", "Images/LS_10.jpg", "Images/LS_11.jpg", "Images/LS_12.jpg"]
};
var modal_num = modalID.getAttribute('data-modal');
for (var i = slides[modal_num].length; i > 0; i--) {
var the_divs = document.createElement('div');
var s_img = document.createElement('img');
the_divs.className = 'mySlides';
s_img.src = slides[modal_num][i];
the_divs.appendChild(s_img);
container.appendChild(the_divs);
}
}
<h2 id="title" style="text-align:center">hellkkko</h2>
<div class="row">
<div class="column">
<img id="modal-1" src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg" style="max-width:100%" data-modal="1" onclick="openModal();currentSlide(1); fillSlides(this);" class="hover-shadow cursor">
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
解决方案
Added a function that generates slides on the fly. There are no slides in HTML and arrow controls are in #content. You gave no details on how album exists so I made a thumbnail for 2 extra albums. Also, there's a solution to your problem concerning the removal of everything with the arrows being the exception. The CSS is a little wonky but I'm sure you can rectify it easily enough.
Details commented in demo
Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title></title>
<style>
html,
body {
height: 100%;
width: 100%
}
body {
font-family: Verdana, sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
.img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.row {
display:flex;
justify-content:space-between;
}
.column {
width: 25%;
padding: 0 8px;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
background: rgba(0, 0, 0, 0.9);
}
/* Modal Content */
.modal-content {
position: relative;
background-color: rgba(0, 0, 0, 0.9);
margin: auto;
padding: 0;
width: 100%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
text-decoration: none;
}
/* Number text (1/3 etc) */
.nth {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
right: 0;
}
img {
margin-bottom: -4px;
cursor: pointer
}
img.hover-shadow {
transition: all .2s ease-in-out;
}
.hover-shadow:hover {
transform: scale(1.1);
}
.modal-content {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
.slide img {
display: block;
height: 100%;
margin: 0 auto;
margin-bottom: 50px;
}
.slide {
text-align: center;
height: 80vh;
display: none;
}
.cap {
font-size: 1.5em;
background: rgba(0, 0, 0, .4);
position: absolute;
z-index: 2;
left: 0;
top: 0;
right: 0;
text-align: center;
color: #fff
}
.act {
display: block
}
</style>
</head>
<body>
<header>
<div class="row">
<div class="column"> <img src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg"
style="max-width:100%" onclick="album(img0, cap0);openModal();"
class="hover-shadow"> </div>
<div class="column"> <img src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg"
style="max-width:100%" onclick="album(img1, cap1);openModal();"
class="hover-shadow"> </div>
<div class="column"> <img src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg"
style="max-width:100%" onclick="album(img2, cap2);openModal();"
class="hover-shadow"> </div>
</div>
</header>
<section id="box">
<div id="xModal" class="modal"> <span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content" id='content'> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next"
onclick="plusSlides(1)">❯</a> </div>
</div>
</section>
<footer> </footer>
<script>
/* 3 arrays are required:
|= 1. An array of strings.
|| Each represents a src of an image
|= 2. An array of strings. Each represents the
|| text of a figcaption
|= 3. An empty array
|| For each additional album add #1 and #2, #3
|| is emptied and reused at the beginning of
|| a new cycle.
*/
// Album 0
var img0 = [
"http://www.catholicevangelism.org/wp-content/uploads/2013/06/1200x800.gif",
"http://chasingseals.com/wp-content/uploads/2014/02/greenlandBanner2000x800.jpg",
"http://www.a1carpet-to.com/wp-content/uploads/2015/08/600x400.png",
"https://support.kickofflabs.com/wp-content/uploads/2016/06/800x1200.png"
];
var cap0 = ['caption1', 'caption2', 'caption3', 'caption4'];
// Album 1
var img1 = [
'https://d3i6fh83elv35t.cloudfront.net/newshour/app/uploads/2016/05/729665main_A-BlackHoleArt-pia16695_full-1024x576.jpg',
'http://cdn.newsapi.com.au/image/v1/85fb305132eb20ebbb01af386983c8a1',
'http://science.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Science/Images/Content/neptune-pia01492-ga.jpg',
'https://cdn.spacetelescope.org/archives/images/wallpaper1/heic1509a.jpg',
'https://i.giphy.com/media/JCUyexH8Zaf8k/giphy.webp'
];
var cap1 = ['Title I', 'Title II', 'Title III', 'Title IV',
'Title V'
];
// Album 2
var img2 = [
'https://i.ytimg.com/vi/YeQnLnRvZ9Y/maxresdefault.jpg',
'https://www.thesun.co.uk/wp-content/uploads/2017/08/nintchdbpict000319076839.jpg?strip=all&w=960',
'https://i0.wp.com/www.sketchysloth.com/wp-content/uploads/2016/07/Legendary-Hanging-Garden-Of-Babylon.jpg?fit=710%2C495&ssl=1',
'https://i.ytimg.com/vi/YoRvJcgSDE4/maxresdefault.jpg',
'https://www.realmofhistory.com/wp-content/uploads/2017/01/mausoleum-at-halicarnassus-restored_1.jpg',
'http://www.ancient-origins.net/sites/default/files/field/image/statue-of-Zeus-Olympia.jpg',
'https://i.ytimg.com/vi/F2yYkbinGnc/maxresdefault.jpg'
];
var cap2 = ['Colossus of Rhodes', 'Great Pyramid of Giza',
'Hanging Gardens of Babylon', 'Lighthouse of Alexandria',
'Mausoleum at Halicarnassus', 'Statue of Zeus at Olympia',
'Temple of Artemis at Ephesus'
];
// Declare a empty array
var data = [];
// Declare some counters outside of loop (or inside of loop using let)
var i, b, x;
// Reference the node that will contain the slides
var con = document.getElementById('content');
/* On each iteration...
|= Empty the data array
|= Create an object...
|| add a value from img[] to the src property
|| add a value from cap[] to the cap property
|| add the current value of index +1 to pos property
|| push the object into data array
*/
// Get the total length of data array
// Call genSlides()
function album(img, cap) {
data.length = 0;
for (i = 0; i < img.length; i++) {
var ele = new Object;
ele.src = img[i];
ele.cap = cap[i];
ele.pos = i + 1;
data.push(ele);
}
var qty = data.length;
genSlides(qty)
}
console.log(data);
/* Pass qty through...
|= On each iteration...
|= Create a documentFragment
|| it will allow us to append new elements to
|| it while still not in the DOM
|| which is faster because tasks within the DOM
|| are slow for the browser in comparison.
|= Notice that the data array is being used
|| to assign unique values.
*/
function genSlides(qty) {
for (b = 0; b < qty; b++) {
var frag = document.createDocumentFragment();
var slide = document.createElement('figure');
slide.id = 's' + b;
slide.className = 'slide';
var cap = document.createElement('figcaption');
cap.className = 'cap';
cap.textContent = data[b].cap;
var img = document.createElement('img');
img.classsName = 'img';
img.src = data[b].src;
var nth = document.createElement('b');
nth.className = 'nth';
nth.textContent = data[b].pos + '/' + data.length;
slide.appendChild(cap);
cap.appendChild(nth);
slide.appendChild(img);
frag.appendChild(slide);
con.appendChild(frag);
}
return false;
}
/* To avoid redundancy call sub functions within an initiating function
|| currentSlide() should start at 0, remember that all indexes by
|| default start at 0 and that the last index is .length - 1
|| showSlides() has ben corrected.
*/
function openModal() {
document.getElementById('xModal').style.display = "block";
showSlides(slideIndex);
currentSlide(0);
}
/* To remove what's in #content with the exception of the arrows we
|| gather all .slides in a NodeList and use a loop to remove them.
*/
function closeModal() {
document.getElementById('xModal').style.display = "none";
var slides = document.querySelectorAll(".slide");
for (x = 0; x < slides.length; x++) {
con.removeChild(slides[x]);
}
}
var slideIndex = 0;
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.querySelectorAll(".slide");
if (n > slides.length - 1) {
slideIndex = 0
}
if (n < 0) {
slideIndex = slides.length - 1
}
// Flipping a class is much cleaner than relying on style
for (i = 0; i < slides.length; i++) {
slides[i].classList.remove('act');
}
slides[slideIndex].classList.add('act');
}
</script>
</body>
</html>
这篇关于JavaScript的 - 试图添加图像幻灯片与JS，但它不起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
