The concept behind this code snippet is to display each element from an array one at a time in a circular manner. The counter keeps track of the elements displayed and resets once all elements have been shown. You'll need the following code :
HTML :
<div id="background">
<div class="contain">
<div></div>
</div>
</div>
CSS:
#background {
height: 500px;
}
.contain {
height: 200px;
background-color: #ccc;
}
jQuery :
$(document).ready(function() {
var arr = ["hello", "hi", "what is up"];
var currentKey = 0;
$("#background").click(function() {
//alert("CurrentKey : " + currentKey);
$(".contain").html(" " + arr[currentKey] + " ").hide().fadeIn(600);
if (currentKey === (arr.length - 1)) {
currentKey = 0;
} else {
currentKey = currentKey + 1;
}
});
});
You can run the snippet below to see this :
$(document).ready(function() {
var arr = ["hello", "hi", "what is up"];
var currentKey = 0;
$("#background").click(function() {
//alert("CurrentKey : " + currentKey);
$(".contain").html(" " + arr[currentKey] + " ").hide().fadeIn(600);
if (currentKey === (arr.length - 1)) {
currentKey = 0;
} else {
currentKey = currentKey + 1;
}
});
});
#background {
height: 500px;
}
.contain {
height: 200px;
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="background">
<div class="contain">
<div></div>
</div>
</div>
For those who prefer JS Fiddle, here's the JS Fiddle link.