使用Javascript在两个幻灯片之间切换 [英] Switching Between Two Slideshows with Javascript

问题描述

我有一个带幻灯片的网页。幻灯片有三张照片。我想在页面上有一个按钮，使用户可以在五种不同的图片之间切换此幻灯片和另一个。如何使用JavaScript编程此按钮，以及我将在HTML中添加第二个幻灯片？

当前HTML：

 < div class =slideshow-container> 
< div class =mySlides fade> 
< div class =numbertext> 1/3< / div> 
< img src =img1.jpgstyle =width：100％> 
< div class =text> Caption Text< / div> 
< / div> 
 
< div class =mySlides fade> 
< div class =numbertext> 2/3< / div> 
< img src =img2.jpgstyle =width：100％> 
< div class =text> Caption Two< / div> 
< / div> 
 
< div class =mySlides fade> 
< div class =numbertext> 3/3< / div> 
< img src =img3.jpgstyle =width：100％> 
< div class =text> Caption Three< / div> 
< / div> 
 
< a class =prevonclick =plusSlides（-1）>&＃10094;< / a> 
< a class =nextonclick =plusSlides（1）>&＃10095;< / a> 
< / div> 
< br> 
 
< div style =text-align：center> 
< span class =dotonclick =currentSlide（1）>< / span> 
< span class =dotonclick =currentSlide（2）>< / span> 
< span class =dotonclick =currentSlide（3）>< / span> 
< / div> 
<按钮>切换幻灯片< /按钮> 
  

目前的CSS：

  / *幻灯片容器* / 
 .slideshow-container {
 max-width：1000px; 
职位：亲属; 
 margin：auto; 
} 
 
 / *下一个&以前的按钮* / 
 .prev，.next {
 cursor：pointer; 
位置：绝对; 
 top：50％; 
 width：auto; 
 margin-top：-22px; 
 padding：16px; 
颜色：白色; 
 font-weight：bold; 
 font-size：18px; 
过渡：0.6s缓解; 
 border-radius：0 3px 3px 0; 
} 
 
 / *将下一个按钮置于右边* / 
 .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; 
位置：绝对; 
 bottom：8px; 
宽度：100％; 
 text-align：center; 
} 
 
 / *数字文字（1/3等）* / 
 .numbertext {
 color：＃f2f2f2; 
 font-size：12px; 
 padding：8px 12px; 
位置：绝对; 
 top：0; 
 
 
 / dots / bullets / indicators * / 
 .dot {
 cursor：pointer; 
 height：13px; 
 width：13px; 
 margin：0 2px; 
 background-color：#bbb; 
 border-radius：50％; 
 display：inline-block; 
转换：背景色0.6s易用性; 
} 
 
 .active，.dot：hover {
 background-color：＃717171; 
} 
 
 / *淡入淡出的动画* / 
。淡入淡出{
 -webkit-animation-name：fade; 
 -webkit-animation-duration：1.5s; 
 animation-name：fade; 
动画持续时间：1.5s; 
} 
 
 @ -webkit-keyframes淡入淡出{b $ b from {opacity：.4} 
 to {opacity：1} 
} 
 
 @keyframes淡入淡出{b $ {from {opacity：.4} 
 to {opacity：1} 
} 
   
 
当前的JavaScript： 
 
 
  var slideIndex = 1; 
 showSlides（slideIndex）; 
 
 function plusSlides（n）{
 showSlides（slideIndex + = n）; 
} 
 
函数currentSlide（n）{
 showSlides（slideIndex = n）; 
} 
 
 function showSlides（n）{
 var i; 
 var slides = document.getElementsByClassName（mySlides）; 
 var dots = document.getElementsByClassName（dot）;如果（n> slides.length）{slideIndex = 1} 
 if（n <1）{slideIndex = slides.length} 
（i = 0; i<幻灯片.length; i ++）{
 slides [i] .style.display =none; （i = 0; i  dots [i] .className = dots [i] .className.replace（active，b 
 $ b ）; 
} 
幻灯片[slideIndex-1] .style.display =block; 
 dots [slideIndex-1] .className + =active; 
} 
  
非常感谢！
解决方案
好的，你需要首先能够动态地创建幻灯片。只有这样你才能够进出不同的幻灯片。我试图不重构你现有的代码。另外，我没有使用jQuery（我个人会使用它）。只需为每张幻灯片生成标记并将其设置在幻灯片div上即可。我必须创建一个内部div，以便按钮不会被覆盖。
 
 
 
 
 
 
  var slideshowIndex = 1; var slideIndex = 1; var slideshows = [['http://placehold.it/500x300/f00/0ff?text=Foo'，'http://placehold.it/500x300/0f0/f0f ？text = Bar'，'http://placehold.it/500x300/00f/ff0?text=Baz']，['http://placehold.it/500x300/f70/07f?text=Fizz'，'http ：//placehold.it/500x300/0f7/f07？text = Buzz'，'http://placehold.it/500x300/70f/7f0?text=Bang']]; var buttonTextArr = ['显示图像'，'显示页面'];函数createSlides（slides）{return slides.map（function（slide，index）{return ['< div class =mySlides fade>'，'< div class =numbertext> '+（index + 1）+'/'+ slides.length +'< / div>'，'< img src = + slide +'>'，'< div class =text> Caption＃'+（index + 1）+'
'，'< / div>] .join（' ）; }）。join（''）;} function createDots（slides）{return slides.map（function（slide，index）{return'< span class =dotonclick =currentSlide（'+（index + 1） （'幻灯片'）[0] .innerHTML = createSlides（幻灯片）;}';'）;< / span>'}）。 document.getElementsByClassName（'dots'）[0] .innerHTML = createDots（slides）;} function loadNextSlideshow（）{slideshowIndex =（slideshowIndex + 1）％2; loadSlideshow（幻灯片[slideshowIndex]）; slideIndex = 1; //重置索引showSlides（slideIndex）; document.getElementsByClassName（'switch'）[0] .innerHTML = buttonTextArr [slideshowIndex];} loadNextSlideshow（）; //载入幻灯片函数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  

/ *幻灯片容器* /。幻灯片容器{max-width：1000px;位置：相对; margin：auto;} / * Next&上一个按钮* /。prev，.next {cursor：pointer;位置：绝对;顶部：50％;宽度：自动; margin-top：-22px;填充：16px;白颜色; font-weight：bold; font-size：18px;过渡：0.6s缓解; border-radius：0 3px 3px 0; text-shadow：0.05em 0.05em 0.25em＃000;} / *将下一个按钮置于右边* /。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;位置：绝对;底部：8px;宽度：100％; text-align：center;} / *数字文本（1/3等）* /。numbertext {color：＃f2f2f2; font-size：12px; padding：8px 12px;位置：绝对;顶部：0;} / *点/项目符号/指标* /。点{cursor：pointer;身高：13px;宽度：13px; margin：0 2px; background-color：#bbb;边界半径：50％;显示：inline-block; transition：background-color 0.6s ease;}。active，.dot：hover {background-color：＃717171;} / *淡入淡出的动画* /。fade {-webkit-animation-name：fade; -webkit-animation-duration：1.5s;动画名称：淡入淡出;动画持续时间：1.5s;} @ - webkit-keyframes淡出{从{opacity：0.4}到{opacity：1}} @ keyframes淡出{从{opacity：0.4}到{opacity：1}}