This is my first project in Javascript. It's an image slider with a next and previous arrow. One thing really bothering me is that there can some very noticeable lag between clicking an arrow and the image actually changing.
I'd really appreciate if someone review my code and let me know what I could do better.
http://jsfiddle.net/afptfbs8/40/
var myImage = document.getElementById("mainImage");
var imageArray = ["http://lorempixel.com/400/200/sports/1/", "http://lorempixel.com/400/200/sports/2/", "http://lorempixel.com/400/200/sports/3/", "http://lorempixel.com/400/200/sports/4/"];
var imageIndex = 0;
var prevImage = document.getElementById("prev");
var nextImage = document.getElementById("next");
var myTime = 3000;
var myInterval = setInterval(changeImage, myTime);
function changeImage() {
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex = 0;
}
myImage.setAttribute("src", imageArray[imageIndex]);
}
prevImage.onclick = function() {
clearInterval(myInterval);
myInterval = setInterval(changeImage, myTime);
if (imageIndex === 0) {
imageIndex = imageArray.length -1;
} else {
imageIndex = imageIndex - 1;
}
myImage.setAttribute("src", imageArray[imageIndex]);
};
nextImage.onclick = function() {
clearInterval(myInterval);
myInterval = setInterval(changeImage, myTime);
if (imageIndex === imageArray.length -1) {
imageIndex = 0;
} else {
imageIndex = imageIndex + 1;
}
myImage.setAttribute("src", imageArray[imageIndex]);
};
imageArray.forEach(function (value, index) {
var node = document.createElement("li");
var textNode = document.createTextNode(index);
node.appendChild(textNode);
document.getElementById("myList").appendChild(node);
});
myInterval
The problem is that each time you change the picture, you are refetching it from the server. Take a look at the network panel to see. I suggest preloading all of the images so that they do not need to be refetched every time.
var images = new Array();
for (var i = 0; i < imageArray.length; i++) {
images[i] = new Image();
images[i].src = imageArray[i];
}
Related
I'm trying to mimic the look of a stock-exchange board, but can't seem to automatically change text without stopping another.
I've tried
var text = ["2.0%", "1.7%", "1.9%", "1.8%", "1.9%"];
var counter = 0;
var elem = document.getElementById("n1");
var inst = setInterval (change, 1000);
function change () {
elem.innerHTML = text[counter];
counter++;
var content = document.getElementById("n1");
if (counter >= text.length) {
counter = 0;
}
}
var text = ["-12.0%", "-13.7%", "-13.9%", "-12.8%", "-13.9%"];
var counter = 0;
var elem = document.getElementById("n2");
var inst = setInterval (change, 1000);
function change () {
elem.innerHTML = text[counter];
counter++;
var content = document.getElementById("n2");
if (counter >= text.length) {
counter = 0;
}
}
To no avail.
You can't have two different functions with the same name. One will override the other.
I created a single function that accomplishes your goals by passing in the target element and the data as arguments.
function change(elem, data) {
let counter = 0;
setInterval(function() {
elem.innerHTML = data[counter];
counter++;
if (counter >= data.length) {
counter = 0;
}
}, 1000);
}
change(document.getElementById("n1"), ["2.0%", "1.7%", "1.9%", "1.8%", "1.9%"]);
change(document.getElementById("n2"), ["12.0%", "2.7%", "3.9%", "4.8%", "5.9%"]);
<div id="n1"></div>
<div id="n2"></div>
Example
var text = 'ENTER...';
var chars = text.split('');
var enter = document.getElementById("enter")
var i = 0;
setInterval (function(){
if (i < chars.length){
enter.innerHTML += chars[i++];
}else{
i = 0;
enter.innerHTML = "";
}
}, 200);
I'm trying to have this typing "enter" effect and I am wondering how to make it only go once. So it will type out "ENTER..." and then stop.
Example
var text = 'ENTER...';
var enter = document.getElementById("enter")
var i = 0;
(function nextLetter() {
enter.innerHTML = text.substr(0, ++i);
if (i < text.length) {
setTimeout(nextLetter, 200);
}
})();
edit: you either have to use setTimeout (one time "sleep"), or remember return value of setInterval and destroy that timer by clearInterval after you don't need it/want it running.
If you use interval, you have to stop the it with clearInterval. Stop it inside the interval function, which is declared as a variable, in the if-statement:
var text = 'ENTER...';
var enter = document.getElementById("enter")
var i = 0;
var interval = setInterval(function() {
enter.innerHTML += text[i];
i += 1;
if(i === text.length) {
clearInterval(interval);
}
}, 200);
JSFiddle
var text = 'ENTER...';
var chars = text.split('');
var enter = document.getElementById("enter")
var i = 0;
var interval = setInterval (function(){
if(i == chars.length) {
clearInterval(interval);
return;
}
if (i < chars.length){
enter.innerHTML += chars[i++];
}else{
i = 0;
enter.innerHTML = "";
}
}, 200);
<div id="enter"></div>
I am currently writing a code to create a slideshow. My pause button works one time around but once it starts playing again and then doesn't pause again. & same thing once i press the increase button. decrease button doesn't work. I have tried anything. Can someone point me in the right direction or let me know what is wrong. http://jsfiddle.net/#&togetherjs=7F7KQf0TtS
var pic= new Array();
var pcount= 0;
var pindex = 0;
var ptimer;
var cap= new Array();
var ccount= 0;
var cindex = 0;
var ctimer;
var resetButton = document.getElementbyId('resetButton');
resetButton.onclick= reloadPage;
function getallpics(){
var size = prompt("How many pictures are you uploading?");
for (var i = 0; i<size; i++) {
pic[i] = prompt("Enter picture filename:");
pindex++;
cap[i] = prompt("Enter caption:");
cindex++;
}
}
function getpics() {
pcount++;
if (pcount > pindex) {
pcount = 1;
}
document.getElementById("pictures").innerHTML= "<img src=" +pic[pcount-1]+ ">";
}
function getcaps(){
ccount++;
if(ccount > cindex){
ccount=1;
}
document.getElementById("captions").innerHTML = cap[ccount-1];
}
function displaypics() {
ptimer = setInterval("getpics()", 3000);
ctimer = setInterval("getcaps()", 3000);
}
function pause(){
clearTimeout(ptimer);
clearTimeout(ctimer);
}
function increase() {
ptimer = setInterval("getpics()", 1000);
ctimer = setInterval("getcaps()", 1000);
}
function decrease() {
ptimer = setInterval("getpics()", 6000);
ctimer = setInterval("getcaps()", 6000);
}
function reloadPage(){
window.location.reload();
}
Need help on auto slide show on this script:
NewImg = new Array (
"images/Pic03.png",
"images/Pic01.jpg",
"images/Pic02.jpg"
);
var random_display = 0;
var ImgNum = 0;
var ImgLength = NewImg.length - 1;
var totalImages = NewImage.l
//Time delay between Slides in milliseconds
var delay = 1500;
var lock = true;
var run;
function chgImg(direction) {
if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) {
ImgNum = 0;
}
if (ImgNum < 0) {
ImgNum = ImgLength;
}
document.slideshow.src = NewImg[ImgNum];
}
}
my next and back button are okay but the slideshow is not playing automatically.
I'm having difficulty trying to find an answer to my problem. I have a simple slide show where I have next, and previous buttons, but when I hit the previous button it stops at first image. I want it to go from first image to last but can't find the right results. This is what I have:
window.onload = function () {
var listNode = $("image_list");
var captionNode = $("caption");
var imageNode = $("image");
var links = listNode.getElementsByTagName("a");
// Process image links
var i, linkNode, image;
var imageCache = [];
for (i = 0; i < links.length; i++) {
linkNode = links[i];
// Preload image and copy title properties
image = new Image();
image.src = linkNode.getAttribute("href");
image.title = linkNode.getAttribute("title");
imageCache.push(image);
}
//next button handler
var nextButton = $("next");
var imageCounter = 0;
nextButton.onclick = function () {
imageCounter = (imageCounter + 1) % imageCache.length;
image = imageCache[imageCounter];
imageNode.src = image.src;
captionNode.firstChild.nodeValue = image.title;
}
//previous button handler
var prevButton = $("previous");
var imageCounter = 0;
prevButton.onclick = function () {
imageCounter = (imageCounter - 1) % imageCache.length;
image = imageCache[imageCounter];
imageNode.src = image.src;
captionNode.firstChild.nodeValue = image.title;
}
Here's what I would do (I'm not entirely sure about the syntax):
//previous button handler
var prevButton = $("previous");
var imageCounter = 0;
prevButton.onclick = function () {
imageCounter = (imageCounter - 1) % imageCache.length;
//------- INSERTED CODE --------//
imageCounter = imageCounter >= 0 ? imageCounter : imageCache.length - 1 ; //Meaning you've reached the first image and want to go to the last
//------- INSERTED CODE --------//
image = imageCache[imageCounter];
imageNode.src = image.src;
captionNode.firstChild.nodeValue = image.title;
}
Explanation:
So after setting imageCounter, you check its value. If its equal to or higher than zero, keep the value. If it's not (meaning you want to go to the last image), set its value to the length of your imageCache minus 1, seeing as array indices start counting at 0. :)