I need a basic image slider for my website , that consists of five images , in the following order
At the start > 1 st Should be visible for 3 seconds then disappear Image 2 - After 5 seconds 2nd image Should be visible for 3 seconds
then disappear Image 3 -After 10 seconds 3rd image Should be visible
for 3 seconds then disappear Image 4 -After 15 seconds 4th image
Should be visible for 3 seconds then disappear Image 5 -After 20
seconds 5th image Should be visible for 3 seconds then disappear
<div id="image" style="display:block">
<img src="images/one.jpg" name="slide" width="250" height="250" />
<div id="hello"></div>
<script>
var image1=new Image()
image1.src="images/one.jpg"
var image2=new Image()
image2.src="images/two.jpg"
var image3=new Image()
image3.src="images/three.jpg"
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
*///-->
var step=1
function slide(){
document.getElementById('image').style.display = "block";
//if browser does not support the image object, exit.
document.getElementById('hello').innerHTML = "";
if (step < 3 && step == 1 ) {
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
setInterval(function(){clock()},4000);
step++;
setTimeout("slide()",10000)
}
else if (step < 3 && step == 2 ) {
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
setInterval(function(){clock()},4000);
step++;
setTimeout("slide()",20000)
}
else {
step=1;
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
setInterval(function(){clock()},4000);
setTimeout("slide()",3000)
//call();
}
//call function "slideit()" every 2.5 seconds
//var refreshIntervalId = setInterval(fname, 10000);
}
//slide()
function clock()
{
document.getElementById('image').style.display = "none";
document.getElementById('hello').innerHTML = "Hai";
//window.clearInterval();
//setTimeout("slide()",100000)
return;
}slide()
</script>
</body>
var Slider = function() { this.initialize.apply(this, arguments) }
Slider.prototype = {
initialize: function(slider) {
this.ul = slider.children[0]
this.li = this.ul.children
// make <ul> as large as all <li>’s
this.ul.style.width = (this.li[0].clientWidth * this.li.length) + 'px'
this.currentIndex = 0
},
goTo: function(index) {
// filter invalid indices
if (index < 0 || index > this.li.length - 1)
return
// move <ul> left
this.ul.style.left = '-' + (100 * index) + '%'
this.currentIndex = index
},
goToPrev: function() {
this.goTo(this.currentIndex - 1)
},
goToNext: function() {
this.goTo(this.currentIndex + 1)
}
}
i got the solution
<script type="text/javascript">
var employees = [
{"image":"xxyy/images/one.jpg","time": "3000","interval":"12000" },
{"image":"xxyy.com/images/two.jpg","time": "4000" ,"interval":"14000"},
{"image":"xxyy.com/images/three.jpg" ,"time": "5000","interval":"15000"},
{"image":"xxyy.com/images/four.jpg","time":"4500","interval":"12000"}
];
</script>
<body>
<input id="val" type="hidden" name="hidden" value=""/>
<div id="image" style="display:block">
<img src="" name="slide" width="250" height="250" />
<img src="" name="slide" width="250" height="250" />
</div>
<div id="hello"></div>
<script>
var step=0;
function slide1(){
if(step < cnt ){
b = employees[step].image_name;
time = employees[step].time;
interval = employees[step].interval;
document.getElementById('hello').innerHTML = "";
document.getElementById('image').style.display = "block";
document.images.slide.src = "../images/"+b;
setTimeout("clock()",time);
setTimeout("slide1()",interval);
step++;
if(step >= cnt ) {
step = 0 ;
}
}
}
function clock() {
document.getElementById('image').style.display = "none";
document.getElementById('hello').innerHTML = "Hai";
//setTimeout("slide()",100000)
return ;
}
slide1() </script>`
Related
So far this is what I have tried. I cant seem to figure out how to reset the img src to the first image in the folder after the user does not click on a button for 5 seconds.
HTML
<div class="slider">
<div class="img-box">
<img src="images/a.jpg" class="slider-img">
</div>
<button id="first" class="btn" onclick="prev()">Prev</button>
<button id="second" class="btn" onclick="next()">Next</button>
</div>
JavaScript
var slider_img = document.querySelector('.slider-img');
var images = ['a.jpg', 'b.jpg', 'c.jpg', 'd.jpg', 'e.jpg'];
var i = 0;
function prev(){
if(i <= 0) i = images.length;
i--;
return setImg();
}
function next(){
if(i >= images.length-1) i = -1;
i++;
return setImg();
}
function setImg(){
return slider_img.setAttribute('src', "images/"+images[i]);
}
var btnDwn = document.onmousedown
function idk(){
return slider_img.setAttribute('src', "images/"+images[0]);
}
if(btnDwn == false){
setInterval(idk(),5000)
}
I'll define "inactivity/idleness" to if user stops moving mouse AND stops clicking
I do this by making a function that every time you call it, a timeout is set(and the previous timeout deleted) so that the content INSIDE the timeout ONLY activates AFTER 5 seconds of NOT BEING TRIGGERED
Do note that to be idle, stop using your mouse and do not click the functions for about 5 seconds and see it in action :D
var slider_img = document.querySelector('.slider-img');
var images = ['a.jpg', 'b.jpg', 'c.jpg', 'd.jpg', 'e.jpg'];
var i = 0; var timeout=0;
function prev(){
if(i <= 0) i = images.length;
i--; resetImg();
return setImg();
}
function next(){
if(i >= images.length-1) i = -1;
i++; resetImg();
return setImg();
}
function setImg(){
return slider_img.setAttribute('src', "images/"+images[i]);
}
function resetImg(){
clearTimeout(timeout);
timeout=setTimeout(()=>{slider_img.setAttribute('src', "images/"+images[0]);},5000);
}
//every time you click those buttons, you are 'active', now being active would also count as moving your mouse
document.body.addEventListener('mousemove',resetImg)
For some reason when I try to change the src element in the begin game function it does not want to change. The src location is correct and I've tried the setTimeout as well. Is there a way to pause the code but for it to run it Synchronized? The begin function is below pasted again to make it easier to view. Is there a way to use setTimeout without it running EVERYTHING at once?
HTML:
<html>
<head>
<script src="scripts/simon.js" async></script>
<link rel="stylesheet" href="scripts/simon.css">
</head>
<body>
<div id="mySidenav" class="sidenav">
×
<h1><u>Difficulty</u></h1>
Easy
Medium
Hard
Xtreme
<button id="start" onclick="startup()">Start</button>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span>
<div class="infoBar">
<img src="assets/icons/nothing.png"></img>
<img src="assets/icons/nothing.png"></img>
<img src="assets/icons/nothing.png"></img>
<img src="assets/icons/nothing.png"></img>
<img src="assets/icons/nothing.png"></img>
</div>
<div class="game-container">
<img class="redButton" id="red" src="assets/icons/red.png"></img>
<img class="blueButton" id="blue" src="assets/icons/blue.png"></img>
<img class="greenButton" id="green" src="assets/icons/green.png"></img>
<img class="yellowButton" id="yellow" src="assets/icons/yellow.png"></img>
<div class="logo">
<img class="logoButton" src="assets/icons/logo.png"></img>
</div>
</div>
<script src="scripts/simon.js"></script>
</body>
</html>
JS:
var currentLvl;
var playerinput;
var levelOfDiff = 0;
function sleep(miliseconds){
var currentDate = new Date();
var currentTime = currentDate.getTime();
while (currentTime + miliseconds >= new Date().getTime()){
}
}
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("start").innerHTML = "Start";
}
function setDifficulty(diff){
if(diff == "Easy"){
document.getElementById("start").innerHTML = "Start Easy Mode";
levelOfDiff = 3;
}
if(diff == "Medium"){
document.getElementById("start").innerHTML = "Start Medium Mode";
levelOfDiff = 5;
}
if(diff == "Hard"){
document.getElementById("start").innerHTML = "Start Hard Mode";
levelOfDiff = 7;
}
if(diff == "Xtreme"){
document.getElementById("start").innerHTML = "Start Xtreme Mode";
levelOfDiff = 10;
}
}
function startup(){
if(levelOfDiff != 0){
var mainSequence = [levelOfDiff];
beginGame(mainSequence);
}
else{
alert("Please choose a difficulty");
}
}
function beginGame(mainSequence){
for(var x = 0;x<levelOfDiff;x++){
mainSequence[x] = Math.ceil(Math.random() * Math.ceil(4));
}
console.log(mainSequence);
for(var y=0;y<levelOfDiff;y++){
if(mainSequence[y] == 1){
console.log("change");
document.getElementById("green").src = "../assets/icons/greenClick.png";
sleep(1000);
console.log("back");
document.getElementById("green").src = "../assets/icons/green.png";
}
if(mainSequence[y] == 2){
console.log("change");
document.getElementById("red").src = "../assets/icons/redClick.png";
sleep(1000);
console.log("back");
document.getElementById("red").src = "../assets/icons/red.png";
}
if(mainSequence[y] == 3){
console.log("change");
document.getElementById("blue").src = "../assets/icons/BlueClick.png";
sleep(1000);
console.log("back");
document.getElementById("blue").src = "../assets/icons/blue.png";
}
if(mainSequence[y] == 4){
console.log("change");
document.getElementById("yellow").src = "../assets/icons/yellowClick.png";
sleep(1000);
console.log("back");
document.getElementById("yellow").src = "../assets/icons/yellow.png";
}
sleep(1000);
}
}
/*
Green is 1
Red is 2
Blue is 3
Yellow is 4
*/
Problem in JS
function beginGame(mainSequence) {
for (var x = 0; x < levelOfDiff; x++) {
mainSequence[x] = Math.ceil(Math.random() * Math.ceil(4));
}
console.log(mainSequence);
for (var y = 0; y < levelOfDiff; y++) {
if (mainSequence[y] == 1) {
console.log("change");
document.getElementById("green").src = "../assets/icons/greenClick.png";
sleep(1000);
console.log("back");
document.getElementById("green").src = "../assets/icons/green.png";
}
if (mainSequence[y] == 2) {
console.log("change");
document.getElementById("red").src = "../assets/icons/redClick.png";
sleep(1000);
console.log("back");
document.getElementById("red").src = "../assets/icons/red.png";
}
if (mainSequence[y] == 3) {
console.log("change");
document.getElementById("blue").src = "../assets/icons/BlueClick.png";
sleep(1000);
console.log("back");
document.getElementById("blue").src = "../assets/icons/blue.png";
}
if (mainSequence[y] == 4) {
console.log("change");
document.getElementById("yellow").src = "../assets/icons/yellowClick.png";
sleep(1000);
console.log("back");
document.getElementById("yellow").src = "../assets/icons/yellow.png";
}
sleep(1000);
}
}
/*
Green is 1
Red is 2
Blue is 3
Yellow is 4
*/
You've stumbled on one of the differences between JS and most other well-known programming languages. In JavaScript, everything in the same scope runs at the same time. Therefore sleep(1000) doesn't actually do anything because it just runs alongside everything else without blocking.
I'd recommend looking into promises, but if I understand your needs correctly, setTimeout could work. Try something like this:
// This line will run
document.getElementById("green").src = "../assets/icons/greenClick.png";
// Then this will set a waiting time of one second
setTimeout(function() {
// This line will run after 1 second
document.getElementById("green").src = "../assets/icons/green.png";
},1000)
I have the following code to make a image slider with navigation dots, however when I click the dots they go mad, and don't obey the 4 second timer I have enabled.
When the page loads it works fine, and slides over the images perfectly. It is only when I click a nav dot, it moves to the next one super fast.
What am I doing wrong? On reflection, I may need to kill the timer when a nav dot is clicked, but how do I do that?
$(".left-arrow").hide();
var numImgs = $('div.carousel-image-holder img').length;
var addId = numImgs;
if (numImgs == 2) {
var clicked = 0;
imgCount = numImgs - 2;
} else if (numImgs <= 1) {
$(".right-arrow").hide();
} else {
var clicked = 1;
imgCount = numImgs - 1;
}
if (numImgs > 2) {
for (var i = 0; i < numImgs; i++) {
$("ul").prepend('<li class="carousel-buttons" id="carousel' + addId + '"></li>');
var addId = addId - 1;
}
} else {
}
function goToSlide(slideNo) {
$(".carousel-buttons").removeClass("active");
$("#carousel" + slideNo).addClass("active");
clicked = parseInt(slideNo);
var adjustNumberforSlide = slideNo - 1;
$(".carousel-image-holder").animate({
"left": -(600 * adjustNumberforSlide) + "px"
});
console.log(clicked);
if (slideNo == 1) {
$(".left-arrow").hide();
$(".right-arrow").show();
} else if (slideNo == numImgs) {
$(".right-arrow").hide();
$(".left-arrow").show();
} else {
$(".right-arrow").show();
$(".left-arrow").show();
}
// Set timeout to go to next slide (4 seconds)
setTimeout(function() {
goToSlide((clicked < numImgs ? clicked + 1 : 1));
}, 4000);
}
$(".carousel-buttons").click(function() {
var findIdClicked = $(this).attr("id");
var splitString = findIdClicked.split("carousel")
var findTheNumb = splitString[1];
goToSlide(findTheNumb);
});
$(".carousel-buttons-container").find("li").first().addClass("active");
$(".right-arrow").click(function() {
if (clicked < imgCount) {
$(".carousel-image-holder").animate({
"left": "-=600px"
});
console.log(clicked);
} else {
$(".carousel-image-holder").animate({
"left": "-=600px"
});
$(".right-arrow").hide();
console.log(clicked);
}
clicked = clicked + 1;
$(".left-arrow").show();
$(".carousel-buttons").removeClass("active");
$("#carousel" + clicked).addClass("active");
});
$(".left-arrow").click(function() {
if (clicked > 2) {
$(".carousel-image-holder").animate({
"left": "+=600px"
});
console.log(clicked);
} else {
$(".carousel-image-holder").animate({
"left": "+=600px"
});
$(".left-arrow").hide();
console.log(clicked);
}
$(".right-arrow").show();
clicked = clicked - 1;
$(".carousel-buttons").removeClass("active");
$("#carousel" + clicked).addClass("active");
});
// Start timer
goToSlide(clicked);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-container">
<div class="left-arrow"></div>
<div class="right-arrow"></div>
<div class="carousel-image-holder">
<img src="education/make-a-booking.jpg" />
<img src="education/make-a-booking.jpg" />
<img src="ducation/make-a-booking.jpg" />
<img src="education/make-a-booking.jpg" />
<img src="education/make-a-booking.jpg" />
<img src="education/make-a-booking.jpg" />
</div>
</div>
<div class="clear"></div>
<div class="carousel-buttons-container">
<ul>
</ul>
</div>
When you click a button, you need to clear the old loop before starting your new one. Use clearTimeout for this, and store the id in a global variable.
// Set timeout to go to next slide (4 seconds)
window.currentLoop = setTimeout(function() { // save the timer
goToSlide((clicked < numImgs ? clicked + 1 : 1));
}, 4000);
}
$(".carousel-buttons").click(function() {
var findIdClicked = $(this).attr("id");
var splitString = findIdClicked.split("carousel")
var findTheNumb = splitString[1];
clearTimeout(window.currentLoop); // clear the old timer
goToSlide(findTheNumb);
});
https://jsfiddle.net/cqn67z1n/
I need to show three images one by one with using javascript setinterval function can you please any one help me.
Bellow is my html code.
<div class="imageHolder">
<img src="http://lorempixel.com/400/200/sports/" style="display:none;" class="image1" border="0" />
<img src="http://lorempixel.com/400/200/sports/1" style="display:none;" class="image2" border="0" />
<img src="http://lorempixel.com/400/200/" style="display:none;" class="image3" border="0" />
</div>
<head>
<script type="text/javascript">
function start() {
var images = document.querySelectorAll('.imageHolder img');
var images_count = images.length;
var image_index = false;
var delay = 3000; // 3 seconds delay
function animateImageHolder() {
if (false !== image_index) {
images[image_index].style = 'display:none';
image_index++;
image_index = (image_index < images_count ? image_index : 0);
} else {
image_index = 0;
}
images[image_index].style = 'display:inline';
}
animateImageHolder();
setInterval(animateImageHolder, delay);
}
</script>
</head>
<body onload="start()">
<!-- ... -->
This question is pretty much like "do my job for me" but you are honest in your english.
You did not say how long each image should be visible so I set it to 3 seconds (interval = 3000).
I recommend you to set the style attribute of the first image to be style="display:block" and the rest to style="display:none".
function slider(element) {
var next_image = 0
, interval = 3000
, images = Array.prototype.filter.call(element.children, function(child) {
return child.tagName === "IMG";
})
;
setInterval(function() {
images.forEach(function(image, i) {
image.style.display = i === next_image ? "block" : "none";
})
next_image = (next_image + 1) % images.length;
}, interval);
}
slider(document.querySelector("div.imageHolder"))
I am trying to crete image slide using java script .Here is my code
<script type="text/javascript">
//variable that will increment through the images
var step = 1
function slideit() {
var image1 = ["imges/IMG_0579.JPG","imges/IMG_0580.JPG","imges/IMG_0581.JPG"];
//var image2 = new Image()
// var image3 = new Image()
//if browser does not support the image object, exit.
document.write("hello");
document.getElementById("slide").src = image1[step];
document.write("kjds");
if (step < 3)
step++;
else
step = 1;
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()", 2500);
}
slideit();
//-->
</script>
I am getting console error src is not null
here is img element
<img id="slide" src="imges/IMG_0588.JPG" />
well, I'm not good at expressing,so I give you the code directly.
<html>
<head>
<title>test</title>
</head>
<body>
<img id="slide" src="#" />
</body>
<script type="text/javascript">
var step = 1
function slideit() {
var image1 = ["imges/IMG_0579.JPG","imges/IMG_0580.JPG","imges/IMG_0581.JPG"];
document.getElementById("slide").src = image1[step];
if (step < 3)
step++;
else
step = 1;
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()", 2500);
}
slideit();
</script>
</html>