Jump to content

Why this function doesn't work as I expect?


Recommended Posts

Hi, I want to change the background image automatically every 5 second and the indicators should be green. I followed w3schools slideshow tutorial and created this slideshow. But it doesn't seem to work as expectation. Please tell me where I made the mistake. thank you in advance.

<!DOCTYPE html>
<html>
	<head>
		<style>
			body {
				margin: 0;
				padding: 0;
			}
.header-slideshow-container {
	width: 100%;
	margin: 0;
	padding: 0;
}
			.header-slide {
				display: block;
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
			}
#header-slide1 {
	background-image: url("http://www.w3schools.com/howto/img_nature_wide.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: 100% 100%;
}
			#header-slide2 {
	background-image: url("http://www.w3schools.com/howto/img_fjords_wide.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: 100% 100%;
}
			#header-slide3 {
	background-image: url("http://www.w3schools.com/howto/img_mountains_wide.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: 100% 100%;
}
.current-header-slides-container {
	position: absolute;
	top: 45%;
	right: 25px;
	margin-top: -30px;
}
.current-header-slide-indicator {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	margin-bottom: 5px;
	background-color: black;
}
		</style>
	</head>
	<body>
		<div class= "header-slideshow-container">
			<div class= "header-slide" id= "header-slide1"></div>
			<div class= "header-slide" id= "header-slide2"></div>
			<div class= "header-slide" id= "header-slide3"></div>
				<div class= "current-header-slides-container">
					<div class= "current-header-slide-indicator"></div>
					<div class= "current-header-slide-indicator"></div>
					<div class= "current-header-slide-indicator"></div>
				</div>
			</div>
<script>
var h = window.innerHeight;
(function () {
	'use strict';
	document.getElementsByClassName("header-slideshow-container")[0].style.height = h + 'px';
}());

var headerSlideIndex = 0;
headerSlideshow();
function headerSlideshow() {
	'use strict';
	var i,
		headerSlides = document.getElementsByClassName("header-slide"),
		dots = document.getElementsByClassName("current-header-slide-indicator");
	for (i = 0; i < headerSlides.length; i++) {
		headerSlides[i].style.display = "none";
	}
	headerSlideIndex++;
	if (headerSlideIndex >= headerSlides.length) {
		headerSlideIndex = 1;
	}
	for (i = 0; i < dots.length; i++) {
		dots[i].style.backgroundColor = "black";
	}
	headerSlides[i-1].style.display = "block";
	dots[i-1].style.backgroundColor = "green";
	setTimeout(headerSlideshow, 5000);
}
</script>
	</body>
</html>
Link to post
Share on other sites

What part of your code uses 'headerSlideIndex' to change background-color and makes slideshow background-image visible using display: block, but is currently using for loop varible 'i', which is outside the for loop anyway.

 

The for loop 'i' variable will always be the highest value after incrementing reaches set limit.

Edited by dsonesuk
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...