图像未出现在旋转木马中

时间：2018-06-15 18:06:22

标签： javascript html css carousel

以下代码看起来令人生畏，但其中很多都是重复的。尝试点击红色按钮。

＆＃13;
＆＃13; 
<body>
<ul id="carousel" class="carousel">
<button id="moveSlideLeft" class="moveSlide moveSlideLeft"></button>
<div id="track" class="track">
<li class="slide1" data-shown="true2" title="true2"><img src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Frajatbhageria%2Ffiles%2F2017%2F09%2Fcode-copy-1200x1200.jpg"></li>
<li class="slide2" data-shown="false3" title="false3"><img src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Frajatbhageria%2Ffiles%2F2017%2F09%2Fcode-copy-1200x1200.jpg"></li>
<li class="slide3" data-shown="false1" title="false1"><img src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Frajatbhageria%2Ffiles%2F2017%2F09%2Fcode-copy-1200x1200.jpg"></li>
</div>
<button id="moveSlideRight" class="moveSlide moveSlideRight"></button>
</ul>
</body>
<style>
.carousel {
	list-style-type: none;
	position: relative;
}
.moveSlideLeft {
	left: 0px;
}
.moveSlideLeft>img {
	width: 10px;
	height: 10px;
	transform: rotate(180deg);
}
.moveSlide {
	margin: none;
	padding: none;
	width: 20px;
  height: 20px;
  background-color: red;
	border: none;
	float: left;
	position: absolute;
	z-index: 1;
}
.carousel>.track {
	margin: none;
	padding: none;
	left: 0px;
	width: 99px;
	height: 100px;
	overflow: hidden;
	position: absolute;
}
.carousel>.track>li[data-shown="false1"] {
	transform: translateX(-99px);
	z-index: 0;
	transition: transform 1s ease-out;
}
.carousel>.track>li[data-shown="true2"] {
	transform: translateX(0px);
	z-index: 2;
	transition: transform 1s ease-out;
}
.carousel>.track>li[data-shown="false3"] {
	transform: translateX(99px);
	z-index: 0;
	transition: transform 1s ease-out;
}
.carousel>.track>li>img {
	float: left;
  width: 99px;
  height: 100px;
}
.moveSlideRight {
	left: 80px;
}
.moveSlideRight>img {
	width: 10px;
	height: 10px;
}
</style>
<script>
const left = document.getElementById("moveSlideLeft");
const right = document.getElementById("moveSlideRight");
left.onclick = function() {
	var carouselValues = [];
	var tagReferences = document.getElementById("carousel").getElementsByTagName("li");
	for (var i=0; i<=2; i++) {
		carouselValues[i] = tagReferences[i].dataset.shown;
	}
	var placeholder;
	for (var i=0; i<=2; i++) {
		if (carouselValues[i] == "true2") {
			placeholder = i;
			break; 
		}
	}
	if (placeholder == 0) {
		carouselValues[0] = "false3";
		carouselValues[1] = "false1";
		carouselValues[2] = "true2";
	}
	else if (placeholder == 1) {
		carouselValues[0] = "true2";
		carouselValues[1] = "false3";
		carouselValues[2] = "false1";
	}
	else if (placeholder == 2) {
		carouselValues[0] = "false1";
		carouselValues[1] = "true2";
		carouselValues[2] = "false3";
	}
	for (var i = 0; i<=2; i++) {
		tagReferences[i].dataset.shown = carouselValues[i];
		tagReferences[i].title = carouselValues[i];
	}
}
right.onclick = function() {
	var carouselValues = [];
	var tagReferences = document.getElementById("carousel").getElementsByTagName("li");
	for (var i=0; i<=2; i++) {
		carouselValues[i] = tagReferences[i].dataset.shown;
	}
	var placeholder;
	for (var i = 0; i<=2; i++) {
		if (carouselValues[i] == "true2") {
			placeholder = i;
			break; 
		}
	}
	if (placeholder == 0) {
		carouselValues[0] = "false1";
		carouselValues[1] = "true2";
		carouselValues[2] = "false3";
	}
  else if (placeholder == 1) {
		carouselValues[0] = "false3";
		carouselValues[1] = "false1";
		carouselValues[2] = "true2";
	}
  else if (placeholder == 2) {
		carouselValues[0] = "true2";
		carouselValues[1] = "false3";
		carouselValues[2] = "false1";
	}
	for (var i = 0; i<=2; i++) {
		tagReferences[i].dataset.shown = carouselValues[i];
		tagReferences[i].title = carouselValues[i];
	}		
}
</script>
＆＃13;
＆＃13;
＆＃13;

我不知道为什么只有一张图片出现。我试图制作滑动旋转木马。每次单击按钮时，数据显示的属性都会更改。根据数据显示属性的值，新幻灯片应该滑入。我的错误在哪里？

1 个答案:

答案 0 :(得分：1)

您只需将position: absolute添加到carousel>.track>li>img即可将它们列在一行中，因为您将它们浮动到左侧但位于彼此的顶部

const left = document.getElementById("moveSlideLeft");
    const right = document.getElementById("moveSlideRight");
    left.onclick = function() {
    	var carouselValues = [];
    	var tagReferences = document.getElementById("carousel").getElementsByTagName("li");
    	for (var i=0; i<=2; i++) {
    		carouselValues[i] = tagReferences[i].dataset.shown;
    	}
    	var placeholder;
    	for (var i=0; i<=2; i++) {
    		if (carouselValues[i] == "true2") {
    			placeholder = i;
    			break; 
    		}
    	}
    	if (placeholder == 0) {
    		carouselValues[0] = "false3";
    		carouselValues[1] = "false1";
    		carouselValues[2] = "true2";
    	}
    	else if (placeholder == 1) {
    		carouselValues[0] = "true2";
    		carouselValues[1] = "false3";
    		carouselValues[2] = "false1";
    	}
    	else if (placeholder == 2) {
    		carouselValues[0] = "false1";
    		carouselValues[1] = "true2";
    		carouselValues[2] = "false3";
    	}
    	for (var i = 0; i<=2; i++) {
    		tagReferences[i].dataset.shown = carouselValues[i];
    		tagReferences[i].title = carouselValues[i];
    	}
    }
    right.onclick = function() {
    	var carouselValues = [];
    	var tagReferences = document.getElementById("carousel").getElementsByTagName("li");
    	for (var i=0; i<=2; i++) {
    		carouselValues[i] = tagReferences[i].dataset.shown;
    	}
    	var placeholder;
    	for (var i = 0; i<=2; i++) {
    		if (carouselValues[i] == "true2") {
    			placeholder = i;
    			break; 
    		}
    	}
    	if (placeholder == 0) {
    		carouselValues[0] = "false1";
    		carouselValues[1] = "true2";
    		carouselValues[2] = "false3";
    	}
      else if (placeholder == 1) {
    		carouselValues[0] = "false3";
    		carouselValues[1] = "false1";
    		carouselValues[2] = "true2";
    	}
      else if (placeholder == 2) {
    		carouselValues[0] = "true2";
    		carouselValues[1] = "false3";
    		carouselValues[2] = "false1";
    	}
    	for (var i = 0; i<=2; i++) {
    		tagReferences[i].dataset.shown = carouselValues[i];
    		tagReferences[i].title = carouselValues[i];
    	}		
    }
.carousel {
    	list-style-type: none;
    	position: relative;
    }
    .moveSlideLeft {
    	left: 0px;
    }
    .moveSlideLeft>img {
    	width: 10px;
    	height: 10px;
    	transform: rotate(180deg);
    }
    .moveSlide {
    	margin: none;
    	padding: none;
    	width: 20px;
      height: 20px;
      background-color: red;
    	border: none;
    	float: left;
    	position: absolute;
    	z-index: 1;
    }
    .carousel>.track {
    	margin: none;
    	padding: none;
    	left: 0px;
    	width: 99px;
    	height: 100px;
    	overflow: hidden;
    	position: absolute;
    }
    .carousel>.track>li[data-shown="false1"] {
    	transform: translateX(-99px);
    	z-index: 0;
    	transition: transform 1s ease-out;
    }
    .carousel>.track>li[data-shown="true2"] {
    	transform: translateX(0px);
    	z-index: 2;
    	transition: transform 1s ease-out;
    }
    .carousel>.track>li[data-shown="false3"] {
    	transform: translateX(99px);
    	z-index: 0;
    	transition: transform 1s ease-out;
    }
    .carousel>.track>li>img {
    	float: left;
      width: 99px;
      height: 100px;
      position: absolute;
    }
    .moveSlideRight {
    	left: 80px;
    }
    .moveSlideRight>img {
    	width: 10px;
    	height: 10px;
    }
    <ul id="carousel" class="carousel">
    <button id="moveSlideLeft" class="moveSlide moveSlideLeft"></button>
    <div id="track" class="track">
    <li class="slide1" data-shown="true2" title="true2"><img src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Frajatbhageria%2Ffiles%2F2017%2F09%2Fcode-copy-1200x1200.jpg"></li>
    <li class="slide2" data-shown="false3" title="false3"><img src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Frajatbhageria%2Ffiles%2F2017%2F09%2Fcode-copy-1200x1200.jpg"></li>
    <li class="slide3" data-shown="false1" title="false1"><img src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Frajatbhageria%2Ffiles%2F2017%2F09%2Fcode-copy-1200x1200.jpg"></li>
    </div>
    <button id="moveSlideRight" class="moveSlide moveSlideRight"></button>
    </ul>

相关问题
最新问题