to start things of I want to mention that I am very new at this and probably very bad and I have tried for weeks now, searched answers and so on and just couldn't implement something proper in my code. I want to simply pause / resume a slide animation. I managed to make most of it work, but the problem is the setInterval. mine is set to 10s. I have a fading-in-out animation that lasts also 10 secs. If i pause lets say after 5 secs and then resume, the animation will have 10 extra seconds adding up to 15, after which it will change the slide abruptly and I want a smooth transition.
What I could think of is to save the elapsed time from the interval at the moment of pausing and then subtract that value from the total time of the interval and set it for the remaining part. Problem is i don't know how to put that into code. :/
var slideIndex = 1;
var myIndex = 0;
var myVar;
var playing = true;
var pauseButton = document.getElementById("pause");
var y = document.getElementsByClassName("mySlides");
var k;
var div = document.getElementsByClassName("stuff");
var globaltime = 10000;
var slideInterval = setInterval(carousel, globaltime);
var milisec;
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" white", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " white";
}
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" white", "");
}
x[myIndex-1].style.display = "block";
dots[myIndex-1].className += " white";
}
function pauseSlideshow(){
pauseButton.innerHTML = '►';
playing = false;
t = slideInterval;
clearInterval(slideInterval);
for (k = 0; k < div.length; k++) {
div[k].className = div[k].className.replace(" running", " paused");
}
}
function playSlideshow(){
pauseButton.innerHTML = '❙❙';
playing = true;
slideInterval = setInterval(carousel, globaltime);
for (k = 0; k < div.length; k++) {
div[k].className = div[k].className.replace(" paused", " running");
}
}
function stop(){
if(playing){
pauseSlideshow();
}
else {
playSlideshow();
}
}
carousel();
timer();
showDivs(slideIndex);
Thank you very much in advance for your time, patience and understanding.
Related
I have a working slideshow, but at the end of the images it just stops. Is there something I can add or change to my code (below) that could have it repeat or loop continuously?
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
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";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
You can use setInterval instead of setTimeout
setTimeout() triggers the expression only once whilesetInterval()
keeps triggering expressionregularly after the given interval of time.
(unless you tell it to stop).
=> setInterval(showSlides, 2000)
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 wanna add 2 slideshow in one single webpages so this is the code for 1 slide show
<script>
var slideIndex = 0;
var slides = document.getElementsByClassName("mySlides1");
showSlides();
function showSlides() {
var i;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 3000); // Change image every 5 seconds
}
function currentSlide(no) {
var i;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex = no;
slides[no-1].style.display = "block";
function plusSlides(n) {
var newslideIndex = slideIndex + n;
if(newslideIndex < 6 && newslideIndex > 0){
currentSlide(newslideIndex);
}
}
</script>
then I wanted to add another slideshow so I add mySlides2
var slides = document.getElementsByClassName("mySlides1", "mySlides2");
but it's not working .
Get your slide elements into two HTMLCollections then combine them into one array.
var slide1 = document.getElementsByClassName("mySlides1");
var slide2 = document.getElementsByClassName("mySlides1");
var slides = [];
for(var i = 0; i < slide1.length; i++){
slides[i] = slide1[i];
}
for(var length = slide1.length, i = length; i < slide2.length+length; i++ ){
slides[i] = slide2[i - length];
}
//showSlides();
I want to reuse recipes_number1 in '.btn-random' after I click the button, but my code is not work...
I have checked, I found that recipes_number1 can't bring out...
can anyone save me ? :(
var recipes_number1 ;
$('.btn-random').click(function(){
recipes_number1 = Math.floor(Math.random() * 3);
var photo_url = Appetizer_photos[ recipes_number1 ];
var splitText = Appetizer[ recipes_number1 ];
$('#random-photo').attr('src',photo_url);
document.getElementById("list1").innerHTML= splitText;
;
});
var Appertizer_slide = Appertizer_name[recipes_number1];
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName(Appertizer_slide);
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
I think you're asking how to get Main_Dish_slide the updated value after the click takes place:
var recipes_number1 ;
var Main_Dish_slide;
$('.btn-random').click(function(){
recipes_number1 = Math.floor(Math.random() * 3);
var photo_url = Appetizer_photos[ recipes_number1 ];
var splitText = Appetizer[ recipes_number1 ];
$('#random-photo').attr('src',photo_url);
document.getElementById("list1").innerHTML= splitText;
Main_Dish_slide = Main_Dish_name[recipes_number1];
});
function showDivs(n) {
var i;
var x = document.getElementsByClassName(Main_Dish_slide);
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
Same concept, you need to re-assign what Appertizer_slide is referencing - one main difference between this and the code you first provided is you will need to give Appertizer_slide a starting value if you plan on calling showDivs right away:
var recipes_number1 ;
var Appertizer_slide = Appertizer_name[Math.floor(Math.random() * 3)];
$('.btn-random').click(function(){
recipes_number1 = Math.floor(Math.random() * 3);
var photo_url = Appetizer_photos[ recipes_number1 ];
var splitText = Appetizer[ recipes_number1 ];
$('#random-photo').attr('src',photo_url);
document.getElementById("list1").innerHTML= splitText;
Appertizer_slide = Appertizer_name[recipes_number1];
});
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName(Appertizer_slide);
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
Try this:
var recipes_number1, Main_Dish_slide;
$('.btn-random').click(function(){
recipes_number1 = Math.floor(Math.random() * 3);
var photo_url = Appetizer_photos[ recipes_number1 ];
var splitText = Appetizer[ recipes_number1 ];
$('#random-photo').attr('src',photo_url);
document.getElementById("list1").innerHTML= splitText;
Main_Dish_slide = Main_Dish_name[recipes_number1];
});
function showDivs(n) {
var i;
var x = document.getElementsByClassName(Main_Dish_slide);
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
I am using following java-script for a slide show, now I like to pause the loop on mouse-over event on the element "dot", my expertise in java is zero, please help.
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) { slideIndex = 1 }
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";
setTimeout(showSlides, 5000); // Change text every 5 seconds
}
</script>
A few things. Firstly, I would suggest using setInterval() instead. This allows you to easily stop the timer outside of the function. The syntax is identical to setTimeout(). setInterval() is very similar to setTimeout(), except it will continue to execute the function (the first parameter) until you call clearInterval().
Note that setInterval() (and setTimeout()) returns a value, which can be used for clearInterval() and clearTimeout(), respectively.
Changing your code to utilize setInterval should be fairly straightforward. Given what you have posted above, it might look something like this:
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) { slideIndex = 1 }
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";
}
var interval = setInterval(showSlides, 5000); // Change text every 5 seconds
Note that I save interval as a variable that can be used later to stop the timer.
Once you have made this change, the solution to your main question becomes much easier. You can set up event handlers by adding the following:
function pauseSlides(event)
{
clearInterval(interval); // Clear the interval we set earlier
}
function resumeSlides(event)
{
interval = setInterval(showSlides, 5000);
}
// Set up event listeners for the dots
var dots = document.getElementsByClassName("dot");
for (i = 0; i < dots.length; i++) {
dots[i].onmouseover = pauseSlides;
dots[i].onmouseout = resumeSlides;
}
The entirety of your code, given the above, may now look something like this:
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) { slideIndex = 1 }
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";
}
var interval = setInterval(showSlides, 5000); // Change text every 5 seconds
// Set up event listeners for the dots
var dots = document.getElementsByClassName("dot");
for (i = 0; i < dots.length; i++) {
dots[i].onmouseover = pauseSlides;
dots[i].onmouseout = resumeSlides;
}
function pauseSlides()
{
clearInterval(interval); // Clear the interval we set earlier
}
function resumeSlides()
{
interval = setInterval(showSlides, 5000);
}
</script>
Additionally, for reference:
setInterval() reference: https://www.w3schools.com/jsref/met_win_setinterval.asp
Events in JavaScript: https://www.w3schools.com/jsref/dom_obj_event.asp
Wonderful Aaron, much appreciated response. I just checked the code and its working perfectly.
Can we modify this code further and on-mouse over event we can go to specific slide? i mean by using the same "dot" element? The dots are representing different slides, so I want if a user trigger mouse over event on any dot, the slide display benith that specific dot element.