JavaScript change image every three seconds
Giving feedback to someone without sounding prejudiced
What is the highest possible scrabble score for placing a single tile
What's the name of the logical fallacy where a debater extends a statement far beyond the original statement to make it true?
Why Shazam when there is already Superman?
How can I, as DM, avoid the Conga Line of Death occurring when implementing some form of flanking rule?
Why is the Sun approximated as a black body at ~ 5800 K?
A variation to the phrase "hanging over my shoulders"
Does the Linux kernel need a file system to run?
Can I say "fingers" when referring to toes?
What to do when eye contact makes your coworker uncomfortable?
How do I tell my boss that I'm quitting soon, especially given that a colleague just left this week
Why should universal income be universal?
How much theory knowledge is actually used while playing?
How to convince somebody that he is fit for something else, but not this job?
What does Apple's new App Store requirement mean
Did the UK lift the requirement for registering SIM cards?
Why is the "ls" command showing permissions of files in a FAT32 partition?
How much of a Devil Fruit must be consumed to gain the power?
Does "he squandered his car on drink" sound natural?
awk assign to multiple variables at once
Microchip documentation does not label CAN buss pins on micro controller pinout diagram
Why is it that I can sometimes guess the next note?
How to get directions in deep space?
Why does AES have exactly 10 rounds for a 128-bit key, 12 for 192 bits and 14 for a 256-bit key size?
JavaScript change image every three seconds
$begingroup$
I have a function that changes the image on a webpage every three seconds. I would like feedback on efficiency, good code practices, and anything else that can improve the quality of this code. It works, I just want any insight if it can work any better. Any and all feedback is welcomed and considered. Thank you in advance!
Slideshow Script
<!-- Script for Slide Show: Change picture every three seconds -->
<script type="text/javascript">
var index = 0;
change();
function change()
//Collect all images with class 'slides'
var x = document.getElementsByClassName('slides');
//Set all the images display to 'none' (invisible)
for(var i = 0; i < x.length; i++)
x[i].style.display = "none";
//Increment index variable
index++;
//Set index to 1 if it's greater than the amount of images
if(index > x.length)
index = 1;
//set image display to 'block' (visible)
x[index - 1].style.display = "block";
//set loop to change image every 3000 milliseconds (3 seconds)
setTimeout(change, 3000);
</script>
HTML Images accessed
<!-- Slide Show -->
<section>
<img class="slides" src="external/ph1.jpg" style="width:100%">
<img class="slides" src="external/ph2.jpg" style="width:100%">
<img class="slides" src="external/ph3.jpg" style="width:100%">
</section>
javascript html
asked 3 mins ago
David WhiteDavid White
338415
$endgroup$
add a comment |
$begingroup$
I have a function that changes the image on a webpage every three seconds. I would like feedback on efficiency, good code practices, and anything else that can improve the quality of this code. It works, I just want any insight if it can work any better. Any and all feedback is welcomed and considered. Thank you in advance!
Slideshow Script
<!-- Script for Slide Show: Change picture every three seconds -->
<script type="text/javascript">
var index = 0;
change();
function change()
//Collect all images with class 'slides'
var x = document.getElementsByClassName('slides');
//Set all the images display to 'none' (invisible)
for(var i = 0; i < x.length; i++)
x[i].style.display = "none";
//Increment index variable
index++;
//Set index to 1 if it's greater than the amount of images
if(index > x.length)
index = 1;
//set image display to 'block' (visible)
x[index - 1].style.display = "block";
//set loop to change image every 3000 milliseconds (3 seconds)
setTimeout(change, 3000);
</script>
HTML Images accessed
<!-- Slide Show -->
<section>
<img class="slides" src="external/ph1.jpg" style="width:100%">
<img class="slides" src="external/ph2.jpg" style="width:100%">
<img class="slides" src="external/ph3.jpg" style="width:100%">
</section>
javascript html
asked 3 mins ago
David WhiteDavid White
338415
$endgroup$
add a comment |
$begingroup$
I have a function that changes the image on a webpage every three seconds. I would like feedback on efficiency, good code practices, and anything else that can improve the quality of this code. It works, I just want any insight if it can work any better. Any and all feedback is welcomed and considered. Thank you in advance!
Slideshow Script
<!-- Script for Slide Show: Change picture every three seconds -->
<script type="text/javascript">
var index = 0;
change();
function change()
//Collect all images with class 'slides'
var x = document.getElementsByClassName('slides');
//Set all the images display to 'none' (invisible)
for(var i = 0; i < x.length; i++)
x[i].style.display = "none";
//Increment index variable
index++;
//Set index to 1 if it's greater than the amount of images
if(index > x.length)
index = 1;
//set image display to 'block' (visible)
x[index - 1].style.display = "block";
//set loop to change image every 3000 milliseconds (3 seconds)
setTimeout(change, 3000);
</script>
HTML Images accessed
<!-- Slide Show -->
<section>
<img class="slides" src="external/ph1.jpg" style="width:100%">
<img class="slides" src="external/ph2.jpg" style="width:100%">
<img class="slides" src="external/ph3.jpg" style="width:100%">
</section>
javascript html
asked 3 mins ago
David WhiteDavid White
338415
$endgroup$
I have a function that changes the image on a webpage every three seconds. I would like feedback on efficiency, good code practices, and anything else that can improve the quality of this code. It works, I just want any insight if it can work any better. Any and all feedback is welcomed and considered. Thank you in advance!
Slideshow Script
<!-- Script for Slide Show: Change picture every three seconds -->
<script type="text/javascript">
var index = 0;
change();
function change()
//Collect all images with class 'slides'
var x = document.getElementsByClassName('slides');
//Set all the images display to 'none' (invisible)
for(var i = 0; i < x.length; i++)
x[i].style.display = "none";
//Increment index variable
index++;
//Set index to 1 if it's greater than the amount of images
if(index > x.length)
index = 1;
//set image display to 'block' (visible)
x[index - 1].style.display = "block";
//set loop to change image every 3000 milliseconds (3 seconds)
setTimeout(change, 3000);
</script>
HTML Images accessed
<!-- Slide Show -->
<section>
<img class="slides" src="external/ph1.jpg" style="width:100%">
<img class="slides" src="external/ph2.jpg" style="width:100%">
<img class="slides" src="external/ph3.jpg" style="width:100%">
</section>
javascript html
javascript html
asked 3 mins ago
David WhiteDavid White
338415
asked 3 mins ago
David WhiteDavid White
338415
asked 3 mins ago
David WhiteDavid White
338415
asked 3 mins ago
David WhiteDavid White
338415
asked 3 mins ago
David WhiteDavid White
338415
338415
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
return StackExchange.using("mathjaxEditing", function ()
StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix)
StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
);
);
, "mathjax-editing");
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "196"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f215967%2fjavascript-change-image-every-three-seconds%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Code Review Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
Use MathJax to format equations. MathJax reference.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f215967%2fjavascript-change-image-every-three-seconds%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
