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...

I need to design and implement a JAVASCRIPT program that will allow us to determine the...

I need to design and implement a JAVASCRIPT program that will allow us to determine the length of time needed to pay off a credit card balance, as well as the total interest paid. The program must implement the following functions: displayWelcome This function should display the welcome message to the user explaining what the program does. calculateMinimumPayment This function calculates the minimum payment. It should take balance and minimum payment rate as arguments and return the minimum payment. So...

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?

I NEED JAVASCRIPT PROGRAM Chose an activity that you enjoy. It can be a sport that...

I NEED JAVASCRIPT PROGRAM Chose an activity that you enjoy. It can be a sport that you watch or participate in, collecting, hobbies, etc. Do not use a collection of movies since we have covered that in the assignment. Do not use the same topic as a friend. (If two students that don’t know each other happen to select the same topic, that is fine, since they will naturally have different property names and values.) 1. Select some aspect of...

JavaScript Write out a function that takes in array of numbers. You do not need to...

JavaScript Write out a function that takes in array of numbers. You do not need to check if each item of the array is a number, assume this has already been done. Create a new array using the map function that that the original item and adds 4 to it. Then iterate through the new array and log each item to the console. If you do not use map it will be counted wrong. Call your function with the following...

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