Question

我的幻灯片显示有问题。一切都还可以，但我不能在1分钟内创建一个循环幻灯片。有人帮我解决了这个问题！谢谢我写了关于幻灯片放映从右到左滑动图像

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Slide - Show</title>
	<style>
		.slideShowImages{
			width:600px;
			height:420px;
			overflow:hidden;
			position:relative;
		}
		img{
			width:600px;
		}
		.slideShowImages .slideShowInner{
				display:flex;
				position:absolute;
				left:0;
				transition: left 0.2s ease-out;
			}
		.next::after , .prev::after{
			content: ">";
			position:absolute;
			top:50%;
			right:0;
			background:white;
			width:1em;
			height:3em;
			font-weight:bold;
			line-height:3em;
			font-family:sans-serif;
			transform:translateY(-50%);
			box-sizing:border-box;
			padding:0 0.2em;
			opacity:0.25;
			transition: opacity 0.2s linear;
		}
		.prev::after{
			left:0;
			content: "<";
		}
		.prev:hover::after, .next:hover::after{
			opacity:1;
			cursor:pointer;
		}
		.bubbles{
			position:absolute;
			bottom:2px;
			left:40%;
			display:flex;
			cursor:pointer;
		}
		.bubble{
			margin:2.5px;
			background:#333;
			border-radius:100000px;
			width:10px;
			height:10px;
			display:inline-block;
			opacity:0.25;
			transition: opacity 0.2s linear;
		}
		.bubble:hover{
			opacity:1;
		}
		.bubble:active{
			opacity:1;
		}
	</style>
</head>
<body>
	<div class="slideShowImages">

		<div class="slideShowInner">
			<img src="http://images.all-free-download.com/images/graphiclarge/abstract_wave_background_310308.jpg">
			<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyINr-e7a53DSfGY3o7lPF5xGkyMtIOyYTfpnwy7Ng7E5zD3cs">
			<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRODDVWYLvCUN1ffvwXyAxORulYMSE-bKSCV5mu5uuO2vOoJSSM">
			<img src="http://images.all-free-download.com/images/graphiclarge/flower_pink_background_vector_art_148632.jpg">
		</div>
		
		<div class="bubbles"></div>

		<div class="next"></div>	
		
		<div class="prev"></div>

	</div>
	<script>
		let carousels = document.getElementsByClassName('slideShowImages');
		[].forEach.call(carousels, function(e){
			let next = e.getElementsByClassName('next')[0],
			prev = e.getElementsByClassName('prev')[0],
			bubbleContainer = e.getElementsByClassName('bubbles')[0],
			inner = e.getElementsByClassName('slideShowInner')[0],
			imgs = inner.getElementsByTagName('img'),
			currentImgIndex = 0,
			bubbles = [],
			width = 600;
			// console.log(inner);
			// console.log(imgs);
			for(let i = 0; i < imgs.length ; i++){
				let b = document.createElement('span');
				b.classList.add('bubble');
				bubbleContainer.appendChild(b);
				bubbles.push(b);
				
				b.addEventListener("click", function (){
					currentImgIndex = i;
					switchImg();
				});
			}

			
			function switchImg(){
				inner.style.left = -width * currentImgIndex + 'px';
					
				bubbles.forEach(function(b, i){
					if(i === currentImgIndex){
						b.classList.add('active');
					}else{
						b.classList.remove('active');
					}
				});

			}

			next.addEventListener('click', function(){
				currentImgIndex++;
				if(currentImgIndex >= imgs.length){
					currentImgIndex = 0;
				}
				switchImg();
			});
			prev.addEventListener('click', function(){
				currentImgIndex--;
				if(currentImgIndex < 0){
					currentImgIndex = imgs.length - 1;
				}
				switchImg();
			});

		});

	
	</script>
</body>
</html>

＆＃13;

如何在幻灯片中解析setTimeout

0 个答案: