Question

我正在创建图片“滑块”以修饰网站上的目标网页。我创建了一个成功的，功能齐全的滑块，尽管希望能进一步推动它...

我希望添加一个元素，该元素可在单击时创建交叉渐变图像（一旦从主图像空间下方选择了一个图块），如站点here上详细介绍的（在 Demo下面） 6-单击时在多个图像之间淡入）

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

@charset "utf-8";
/* CSS Document */

html {
	box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.main-slide {
	height: 250px;
	width: 750px;
	margin: auto;
}

.selection-panel {
	opacity: 0.6;
	filter: alpha(opacity=60);
}

.selection-panel:hover {
	opacity:1.0;
	filter: alpha(opacity=100);
}

.selection-panel-off {
	opacity: 1.0;
	filter: alpha(opacity=100);
}

.margins {
	margin-top: 16px!important;
	margin-bottom: 16px!important;
}

.image-spacing,.image-spacing>.single-col {
	padding: 0 8px;
}

.single-col {
	float: left;
	width: 100%;
}

.single-col.third {
	width: 33.33333%;
}

.image-spacing::after,.image-spacing::before {
	content: "";
	display: table;
	clear: both;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Homepage Baner Module</title>
<link rel="stylesheet" href="formatting.css" type="text/css" media="screen">
<style>
.mySlides {display:none}
.demo {cursor:pointer}
</style>
</head>

<body>
	<div class="main-image" style="max-width:750px">
    	<img class="mySlides" 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 class="margins image-spacing">
        	<div class="single-col third">
            <img class="demo selection-panel" src="https://dummyimage.com/750x250/ff5100/fff" style="width:100%" onclick="currentDiv(1)">
            </div>
            <div class="single-col third">
            <img class="demo selection-panel" src="https://dummyimage.com/750x250/00ff51/fff" style="width:100%" onclick="currentDiv(2)">
            </div>
            <div class="single-col third">
            <img class="demo selection-panel" src="https://dummyimage.com/750x250/0055ff/fff" style="width:100%" onclick="currentDiv(3)">
            </div>
		</div>
	</div>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

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";
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" selection-panel-off", "");
  }
  x[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " selection-panel-off";
}
</script>

</body>
</html>

Answer 1

这是执行此操作的一种方法。本示例假定您的图像都很好地适合于相同大小的容器。如果没有，您可能要切换到背景图像。首先，我们将所有.mySlides放入自己的容器元素中：

<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>

然后，我们将这些幻灯片相对于容器进行绝对定位：

.slides-container{
  width: 750px;
  height: 250px;
  position: relative;
  overflow: hidden;
}

.mySlides {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

通过这种方式，它们彼此重叠。现在，您会注意到，它们的不透明度均为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";
}

请参见小提琴：https://jsfiddle.net/pt5bLxv2/87/

交叉渐变图像

1 个答案: