var position = 0;
var size = 0;
var id = 0;
function init(){
var slides = document.getElementById("gallery").children;
var button = document.getElementById('btn');
var size = slides.length;
for(var i = 1; i<size; i++){
slides[i].style.display = 'none';
}
function slide(){
if (position < size){
slides[position].style.display = "block";
position++;
}
else{
position = 0;
for(var i=1; i<size; ++i){
slides[i].style.display = "none";
}
}
}
button.onclick =function(){
if (button.innerHTML == "PLAY") {
id = setInterval(slide, 500);
button.innerHTML = "STOP";
}
else {
button.innerHTML = "PLAY";
clearTimeout(id);
}
};
}
init();
https://fiddle.jshell.net/khimanand_oli/ytc4LeLc/3/
above is the fiddle link,
Gallery should switches slides in autorotation, or visual interval of autoration on every 0.5 second,
but currently there is more time gap when the gallery restart slides.
This is because in your slide function, when position is equal to size, you reset the list and nothing more. Just go trough it.
Display the image (last image in list)
wait 0.5 seconds
reset list (does display the first image)
wait 0.5 seconds
display the first image again
so before you go to the second image you waited 1 second. Just make it so that when the slider resets it displays the first image and sets the position to the second image so that in the next interval you display the second
I would remake your function like this
//function of slider
function slide(){
slides[position].style.display = "none";
if(position < size - 1){
position++;
}
else{
position = 0;
}
slides[position].style.display = "block";
}
With this you don't have all images displayed at the same time, and the position variable is always the number of the image that is being displayed at the moment, which can be helpfull for further functions
Related
I want to build something like this: https://jenniferlynnwagner.com/spanish360/story_html5.html (just for reference). I have images with content, now I want to display them on the screen and when the user clicks on next or previous button, able to do so. So, how can I achieve this thing in my project using JavaScript and Spring boot (backend)?
Below is the script to handle current, next and previous slide.
window.addEventListener('DOMContentLoaded', event => {
// Toggle the side navigation
const sidebarToggle = document.body.querySelector('#sidebarToggle');
if (sidebarToggle) {
// Uncomment Below to persist sidebar toggle between refreshes
// if (localStorage.getItem('sb|sidebar-toggle') === 'true') {
// document.body.classList.toggle('sb-sidenav-toggled');
// }
sidebarToggle.addEventListener('click', event => {
event.preventDefault();
document.body.classList.toggle('sb-sidenav-toggled');
localStorage.setItem('sb|sidebar-toggle', document.body.classList.contains('sb-sidenav-toggled'));
});
}
});
var slide_index = 1;
displaySlides(slide_index);
//chapter1-image 1-182
//chapter 2-image-1-127
//chapter 3-image 1-56
//chapter 4-image 1-42
//chapter 5-image 1-67
function nextSlide(n) {
document.getElementById("slide-img").src="img/slider-2.jpg"
playAudio(slide_index);
}
function playAudio(number) {
var audioElement = document.getElementById("my_audio");
audioElement.pause();
audioElement.currentTime = 0;
audioElement.src = "audio/" + number + ".mp3";
audioElement.load();
audioElement.play();
}
function currentSlide(n) {
displaySlides(slide_index = n);
}
function displaySlides(n) {
var i;
var slides = document.getElementsByClassName("showSlide");
if (n > slides.length) { slide_index = 1 }
if (n < 1) { slide_index = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slide_index - 1].style.display = "block";
}
im trying to make an image slider (carousel) and it is working ok, but when I click the previous or next button fast enough, the event listener starts firing multiple times and the image slider stops functioning correctly.
here is the javaScript
const PREV = document.getElementById("prev");
const NEXT = document.getElementById("next");
let slideIndex = 1;
showSlide(slideIndex);
function changeSlide(n) {
showSlide((slideIndex += n));
}
function showSlide(n) {
let slides = document.getElementsByClassName("quote");
let pictures = document.getElementsByClassName("picture");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (let i = 0; i < pictures.length; i++) {
pictures[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
pictures[slideIndex - 1].style.display = "block";
}
PREV.addEventListener("click", () => {
changeSlide(-1);
});
NEXT.addEventListener("click", () => {
changeSlide(1);
});
*edit: after messing around more, I found that the problem is related to the browser im using (firefox) and screen size...when in responsive mode and the viewport is set to mobile size (375px - 414px) the problem is occurring, but if i make the screen bigger than than 414px it seems to be working as it should...
if you want to avoid that, you need something like this:
let timeout;
function debouncedFunction(callback, time){
if (timeout) clearTimeout(timeout)
timeout = setTimeout(() => callback(), time)
}
this will override timeout and only call the function when the time passes without clicks
I have a folder with png images and several other types of files. I only want to display the png images in the order of their names, how can I do that? All images end in a number; for example, each image is titled "image_001", "image_002", and so on. Right now I have all the images grouped together in a class as shown below but I'd prefer not to have to add every individual image if I didn't want to include any other file types. Thank you in advance.
<section>
<img class="pics" src="imgfolder/picture_001.png" style="width:80%">
<img class="pics" src="imgfolder/picture_002.png" style="width:80%">
<img class="pics" src="imgfolder/picture_003.png" style="width:80%">
</section>
<script type="text/javascript">
var index = 0;
change();
function change() {
var images = document.getElementsByClassName('pics');
for(var i = 0; i < images.length; i++) {
images[i].style.display = "none";
}
index++;
if(index > images.length) {
index = 1;
}
images[index - 1].style.display = "block";
setTimeout(change, 3000);
}
</script>
The JS code is commented with what it does. I've tested this with the same file structure that you used in your question, but you can change it on JS line 9.
<section id="img-container"></section>
const numOfPictures = 3; // The number of pictures in folder
const picturesNumberLength = 3; // "000"
let imageIndex = 1;
let imagesArray = [];
const imagesContainer = document.getElementById("img-container"); // Get the images container, has id "img-container"
for (let i = 1; i < numOfPictures + 1; i++) { // Starts at a 1 index "001"
const img = document.createElement("img"); // Create an image element
img.src = `imgfolder/picture_${(i+"").padStart(picturesNumberLength,"0")}.png`; // Set the source to "imgfolder/picture_001" or other number, works up to 999
img.classList.add("pics"); // Add the pics class
img.style.width = "80%"; // Sets width to 80%
img.style.display = "none"; // Turns off displaying it
imagesContainer.appendChild(img); // Puts the image in the image container
imagesArray.push(img); // Push the reference to the array
}
imagesArray[0].style.display = "block"; // Display the first block
setInterval(() => { // Every 3000ms (3secs), do this
imagesArray[imageIndex].style.display = "block"; // Turn displaying on
if (imageIndex > 0) imagesArray[imageIndex-1].style.display = "none"; // Turn the previous one off
else imagesArray[numOfPictures-1].style.display = "none";
imageIndex++; // Change the index
if (imageIndex >= numOfPictures) imageIndex = 0; // Go back to the beginning after going to the end
}, 3000);
I have a slideshow in JS and html which works fine until I use a variable stored in localStorage to define which slide to start from when the page refresh/reload.
What works:
- after the page has reloaded, the slideshow starts from the desired slide;
- after the page has reloaded and after the first command forward, the slideshow begins to work correctly.
What does not work:
- after the page has reloaded, moving the slideshow forward for the first time always makes the slideshow begins from the first slide;
- after the page has reloaded, moving the slideshow backward for the first time always makes the variable in the local storage undefined and the slides disappear.
I think the issue is with the showSlides(), but I cannot understand what it is.
Here is my code so far:
// Set local storage
var slideIx = localStorage.getItem('slideIndex');
if (slideIx === null) {
slideIx = 1;
}
var slideIndex = slideIx;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
localStorage.setItem('slideIndex', slideIndex);
console.log(localStorage.getItem('slideIndex'));
}
// Thumbnail image controls
function currentSlides(n) {
showSlides(slideIndex = n);
localStorage.setItem('slideIndex', slideIndex);
console.log(localStorage.getItem('slideIndex'));
}
// Show slides
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
// Arrows control
document.onkeydown = function(e) {
e = e || window.event;
if (e.keyCode == '37') {
e.preventDefault();
plusSlides(-1); //left <- show Prev image
} else if (e.keyCode == '39') {
e.preventDefault();
plusSlides(1); // right -> show next image
}
};
Thank you very much for any hint you might have(!).
I think the issue is that you need to convert string to number before you operate with it. The value retrieved from localStorage is always of a String type, while you expect number in your code. Try this:
var slideIx = Number(localStorage.getItem('slideIndex') || 1);
(then next check for null is not needed).
I succeeded the slideShow to show the last picture after refreshing the page by the next code (you can see it here https://jsfiddle.net/mu9otwcy/1/):
var myIndex;
if(localStorage.getItem('slideIx') === null){
myIndex = 0;
}
else{
myIndex = localStorage.getItem('slideIx') -1;
}
console.log(myIndex);
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
console.log(myIndex);
if (myIndex > x.length) {
myIndex = 1;
}
x[myIndex-1].style.display = "block";
var slideIx = localStorage.setItem('slideIx',myIndex);
setTimeout(carousel, 3000);
}
I wrote this line of code to animate the pictures on my webpage:
var SlideShow = function (container) {
this.images = [];
this.curImage = 0;
for (i = 0; i < container.childElementCount; i++) {
this.images.push(container.children[i]);
this.images[i].style.display = "none";
}
var nextSlide = function(){
for (var i = 0; i < this.images.length; i++) {
this.images[i].style.display = "none";
}
this.images[this.curImage].style.display = "block";
this.curImage++;
if (this.curImage >= this.images.length) {
this.curImage = 0;
}
window.setTimeout(nextSlide.bind(this), 3000);
};
nextSlide.call(this);
};
SlideShow(document.getElementById("testslide"));
The slide show works, pictures change but the style is boring. I want it to either slide in from the right to the left or fade in or something similar, any style at all other than just changing. How do I achieve this?