Question

In: Computer Science

How do I program the function in JAVASCRIPT? __init_slideshow(images) function init_slideshow(image_urls, dom, automatic, delay) Param Type...

How do I program the function in JAVASCRIPT?

__init_slideshow(images)

function init_slideshow(image_urls, dom, automatic, delay)

Param	Type	Default	Description
image_urls	Array		Array of images to display in the slideshow
dom	Image		element in which to display one image at a time
automatic	Boolean	false	If true, the slideshow will advance automatically. Every image is displayed after the given delay. If false, the slideshow will advance manually. To do so, call the returned function.
delay	Integer	3000	Delay (in milliseconds) for the automatic slideshow.

This function initializes a new slideshow over an Array of image_urls that are passed. The first image is displayed immediately in the given dom element. The slideshow can advance to the next image automatically or manually. When it runs out of images, the slideshow should continue from the first image.

Returns: Function - a function which can be used to advance the slideshow manually to the next slide.

Hint: use setInterval to have the Browser call a function after a given delay.

Hint: reuse the previous iterator function.

Constraint: do not use global variables. It should be possible to create multiple slideshows in the same page using different sets of images and configuration parameters.

Connect the init_slideshow function with the img and button elements you find in the slideshow.html page. When the page is loaded, an automatic slideshow should be started so that the displayed image changes every 3 seconds. The user can click on the Next button to advance the slideshow more rapidly.

Solutions

Expert Solution

Here is the Jvascript program for a function that initializes a new slideshow over an Array of image_urls that are passed. For your convenience, I have shared multiple solutions.

Kindly give a Thumbs up/Like if you find this answer helpful. It means a lot to me. God bless you !!

Solution 1

HTML Part

The only HTML code needed is a simple <div> containing one <img /> (image) element. Make sure that you assign an ID to the image element.

<div>
    <img id="image1" />
</div>

JavaScript Part

<script>
    var imgArray = [
        'images/image1.jpg',
        'images/image2.jpg',
        'images/image3.jpg'],
        curIndex = 0;
        imgDuration = 5000;

    function slideShow() {
        document.getElementById('image1').src = imgArray[curIndex];
        curIndex++;
        if (curIndex == imgArray.length) { curIndex = 0; }
        setTimeout("slideShow()", imgDuration);
    }
    slideShow();
</script>

Full code

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Slideshow Demo</title>
</head>

<body>
<div>
 <img id="image1" />
</div>

<script>
    var imgArray = [
        'images/image1.jpg',
        'images/image2.jpg',
        'images/image3.jpg'],
        curIndex = 0;
        imgDuration = 5000;

    function slideShow() {
        document.getElementById('image1').src = imgArray[curIndex];
        curIndex++;
        if (curIndex == imgArray.length) { curIndex = 0; }
        setTimeout("slideShow()", imgDuration);
    }
    slideShow();
</script>

</body>
</html>

Solution 2

HTML Part

<div id="slideshow-holder">
        <div id="progress"></div>
</div>

CSS Part

#slideshow-holder { width:600px; height:400px; background:url(spinner.gif) center center no-repeat #fff; position:relative; }
#progress                       { position:absolute; width:100%; text-align:center; color:#999; top:225px; }

Javascript

window.addEvent('domready',function() {
        /* preloading */
        var imagesDir = 'epics/';
        var images = ['2.jpg','3.jpg','1.jpg','4.jpg','5.jpg'];
        var holder = $('slideshow-holder');
        images.each(function(img,i){ images[i] = imagesDir + '' + img; }); //add dir to images
        var progressTemplate = 'Loading image {x} of ' + images.length;
        var updateProgress = function(num) {
                progress.set('text',progressTemplate.replace('{x}',num));
        };
        var progress = $('progress');
        updateProgress('text','0');
        var loader = new Asset.images(images, {
                onProgress: function(c,index) {
                        updateProgress('text',index + 1);
                },
                onComplete: function() {
                        var slides = [];
                        /* put images into page */
                        images.each(function(im) {
                                slides.push(new Element('img',{
                                        src:im,
                                        width: 600,
                                        height: 400,
                                        styles: {
                                                opacity:0,
                                                top:0,
                                                left:0,
                                                position:'absolute',
                                                'z-index': 10
                                        }
                                }).inject(holder));
                                holder.setStyle('background','url(logo.png) center 80px no-repeat');
                        });
                        var showInterval = 5000;
                        var index = 0;
                        progress.set('text','Images loaded.  MooTools FTW.');
                        (function() {slides[index].tween('opacity',1); }).delay(1000);
                        var start = function() {
                                (function() {
                                        holder.setStyle('background','');
                                        slides[index].fade(0);
                                        ++index;
                                        index = (slides[index] ? index : 0);
                                        slides[index].fade(1);
                                }).periodical(showInterval);
                        };

                        /* start the show */
                        start();
                }
        });
});

Solution 3

HTML Part

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
</style>
</head>
<body>

<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="img_nature_wide.jpg" style="width:100%">
  <div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="img_snow_wide.jpg" style="width:100%">
  <div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="img_mountains_wide.jpg" style="width:100%">
  <div class="text">Caption Three</div>
</div>

<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>

</div>
<br>

<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
</div>

<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

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";
}
</script>

</body>
</html>

Javascript

var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) 
{
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  
showSlides(slideIndex = n);
}

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";
}

Kindly give a Thumbs up/Like if you find this answer helpful. It means a lot to me. God bless you !!

venereology answered 1 year ago

Next > < Previous

Related Solutions

Palindrome Javascript I am trying to write this javascript function to check if a number is...

Palindrome Javascript I am trying to write this javascript function to check if a number is Palindrome.. Palindrome means - a word, phrase, or sequence that reads the same backward as forward, e.g., madam or nurses run. This is the code i have, but it doesnt work. Code: let convertButton = document.getElementsByClassName("btn")[0]; let userInput = document.getElementById("number").value; let results = document.getElementById("result").value; convertButton.addEventListener("click", function (event) { event.preventDefault(); console.log(userInput); if (validatePalidrome(userInput)) document.getElementById("result").innerHTML = "true"; else document.getElementById("result").innerHTML = "false"; }); function validatePalidrome(numbers) { let...

Palindrome Javascript - NUMBERS I am trying to write this javascript function to check if a...

Palindrome Javascript - NUMBERS I am trying to write this javascript function to check if a number is Palindrome.. Palindrome means - a word, phrase, or sequence that reads the same backward as forward, e.g., 12321 This is the code i have, but it doesnt work. PLEASE MAKE SURE IT WORK BEFORE POST ANSWER, I GOT @ CODE THAT DID WORK BEFORE HTML JavaScript Palindrome Exercise rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" /> Palindrome Enter a positive number: Is this a palindrome? No...

How do we return the datatype of arguments without using type of in javascript

JavaScript Task Load three images of colorful fall leaves and using functions with parameters do the...

JavaScript Task Load three images of colorful fall leaves and using functions with parameters do the following. (Remember you can call the same function multiple times sending the function different values.) When you move the mouse over the first image, have the second image change to a pumpkin. When you move the mouse off of the first image, have the second image change back to the original leaves. When you move the mouse over the second image, have the third...

Write a javascript program according to the follow requirements: Create a function that converts Fahrenheit to...

Write a javascript program according to the follow requirements: Create a function that converts Fahrenheit to Celsius. It takes a single argument which represents degrees in Fahrenheit. It converts it and returns the degrees in Celsius. Create another function that converts Celsius to Fahrenheit. It takes a argument in Celsius and returns the degrees in Fahrenheit. Implement the function convert(isFtoC, from, to) below. It takes the following three arguments: isFtoC: a boolean that is true if degrees must be converted...

How do I plug in the finite function in excel?

Write an Html Page that uses JavaScript Program to make a Blackjack Game. I need to...

Write an Html Page that uses JavaScript Program to make a Blackjack Game. I need to write an html file (P5.html) that uses JavaScript program to create a Blackjack game. 1. Blackjack Games Rules: a. The object of the game is to "beat the dealer", which can be done in a number of ways: • Get 21 points on your first two cards (called a blackjack), without a dealer blackjack; • Reach a final score higher than the dealer without...

Write a JavaScript program with a function named fives that reads two numbers from two text...

Write a JavaScript program with a function named fives that reads two numbers from two text fields and then outputs to a div "True" if both of the numbers are greater than 5 or if their sum is greater than 20. Otherwise your function should output "False" to the div. If you wish, you may use the following HTML code to begin your program.

The following program is to have a time delay. Calculate and tell how much the time...

The following program is to have a time delay. Calculate and tell how much the time delay is. The CPU frequency is 24-MHZ. org $1000 ; starting address of the program ldx #80000 ; 2 E cycles loop psha ; 2 E cycles pula ; 3 E cycles psha ; pula ; psha ; pula ; psha ; pula ; psha ; pula ; psha ; ...

What is Type I error? How do we correct for Type I error? What happens when...

What is Type I error? How do we correct for Type I error? What happens when we correct for Type I error? What is Type II error? How do we correct for Type II error? What happens when we correct for Type II error? How can we correct for both Type I and Type II error at the same time? Which error is considered the worst type of error to commit?

Subjects