Javascript 交叉衰落图像

我正在创建一个图像“滑块”，以修饰网站的登录页。我创造了一个成功的，功能滑块，虽然希望推动这进一步

我希望添加一个元素，在点击时创建交叉淡入淡出的图像（一旦从主图像空间下面选择了一个磁贴），比如网站上的详细信息（在演示6下面-点击时多个图像之间淡入淡出）

我已经尝试将这个站点上的代码集成到我添加的预先存在的JS中（在HTML中），尽管它似乎会干扰现有的元素。当前代码的JSFIDLE是

@charset“utf-8”；
/*CSS文档*/
html{
框大小：边框框；
}
*，*：之前，*：之后{
框大小：继承；
}
.主幻灯片{
高度：250px；
宽度：750px；
保证金：自动；
}
.选择小组{
不透明度：0.6；
过滤器：α（不透明度=60）；
}
.选择面板：悬停{
不透明度：1.0；
过滤器：α（不透明度=100）；
}
.选择面板关闭{
不透明度：1.0；
过滤器：α（不透明度=100）；
}
.利润{
利润上限：16px！重要；
边缘底部：16px！重要；
}
.图像间距，.图像间距>.单列{
填充：0 8px；
}
.单列{
浮动：左；
宽度：100%；
}
.单列第三{
宽度：33.33333%；
}
.image spacing:：after、.image spacing:：before{
内容：“；
显示：表格；
明确：两者皆有；
}

主页浏览器模块
.mySlides{display:none}
.demo{光标：指针}
var slideIndex=1；
showDivs（slideIndex）；
函数plusDivs（n）{
showDivs（slideIndex+=n）；
}
函数currentDiv（n）{
showDivs（slideIndex=n）；
}
函数showDivs（n）{
var i；
var x=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“演示”）；
如果（n>x.length）{slideIndex=1}
如果（n<1）{slideIndex=x.length}
对于（i=0；i

这里有一种方法可以做到这一点。本例假设您的图像都可以很好地放入相同大小的容器中。如果没有，您可能希望切换到背景图像。首先，我们将把所有的.myslide放在它们自己的容器元素中：

<div class="slides-container"> 
    <img class="mySlides initopacity" src="https://dummyimage.com/750x250/ff5100/fff" height="250px" width="100%">
    <img class="mySlides" src="https://dummyimage.com/750x250/00ff51/fff" height="250px" width="100%">
    <img class="mySlides" src="https://dummyimage.com/750x250/0055ff/fff" height="250px" width="100%">
 </div>

这样的话，他们都在彼此之上。现在，您会注意到，它们的不透明度都为0，但是第一个.mySlide元素有一个名为.initopacity的类。我们将在装载时保持可见：

.initopacity {
  opacity: 1;
}

现在，我们所需要的是一种方法来改变不透明度的每一张幻灯片点击。我们将为此使用一些转换：

.fadeout {
  opacity: 0;
  transition: opacity 1s linear;
}

.fadein {
  opacity: 1;
  transition-delay: 1s;
  transition-property: opacity;
  transition-duration: 1s;
}

现在，我们的showDivs函数只是添加和删除类，而不是更改显示属性：

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var 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"; */
    x[0].classList.remove('initopacity');
    x[i].classList.remove('fadein');
    x[i].classList.add('fadeout');
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" selection-panel-off", "");
  }
  x[slideIndex-1].classList.remove('fadeout')
  x[slideIndex-1].classList.add('fadein')
  /* x[slideIndex-1].style.display = "block"; */
  dots[slideIndex-1].className += " selection-panel-off";
}

函数showDivs（n）{
var i；
var x=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“演示”）；
如果（n>x.length）{slideIndex=1}
如果（n<1）{slideIndex=x.length}
对于（i=0；i

---

请参阅fiddle:

这很完美，但我发现我无法使用标准的“a href”标记链接每张幻灯片图像（.mySlides）。我在这里遗漏了什么吗？问题是.myslides图像绝对是定位的。这段代码可能需要重构一点，以使其与链接一起工作。

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var 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"; */
    x[0].classList.remove('initopacity');
    x[i].classList.remove('fadein');
    x[i].classList.add('fadeout');
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" selection-panel-off", "");
  }
  x[slideIndex-1].classList.remove('fadeout')
  x[slideIndex-1].classList.add('fadein')
  /* x[slideIndex-1].style.display = "block"; */
  dots[slideIndex-1].className += " selection-panel-off";
}