Jump to content

Why this function doesn't work as I expect?


m.s_shohan

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 comment
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 comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...